Support yaml front matter in mermaid blocks

Mermaid diagrams can start with yaml front matter, e.g.
```
---
title: Example Diagram
---
graph LR
  A --> B
```

Relearn injects an init directive
`%%{init: {"theme":"default"}}%%` at the top of a mermaid block to
support theming the mermaid diagram. However this will cause a syntax
parser error in mermaid if the init directive comes before the yaml
front matter.

Valid:
```
%%{init: {"theme":"default"}}%%
graph LR
    A --> B
```
Invalid:
```
%%{init: {"theme":"default"}}%%
---
title: Example
---
graph LR
    A --> B
```

To support yaml front matter, we detect if front matter is used, and
inject the init directive after the front matter.

```
---
title: Example
---
%%{init: {"theme":"default"}}%%
graph LR
    A --> B
```

static/js/theme.js

@@ -167,9 +167,22 @@ function initMermaid( update, attrs ) {
     };
 
     var serializeGraph = function( graph ){
+      // See https://github.com/mermaid-js/mermaid/blob/9a080bb975b03b2b1d4ef6b7927d09e6b6b62760/packages/mermaid/src/diagram-api/frontmatter.ts#L10
+      // for reference on the regex originally taken from jekyll
+      const frontMatterRegex = /^-{3}\s*[\n\r](.*?)[\n\r]-{3}\s*[\n\r]+/s;
+      const matches = graph.content.match(frontMatterRegex);
+      // if we find front matter, we need to put this before the `%%{init` directive.
+      if (matches) {
+        const ymlFrontMatter = graph.content.substring(0, matches[0].length);
+        const graphContent = graph.content.slice(matches[0].length);
+        var s = ymlFrontMatter + '\n%%{init: ' + JSON.stringify( graph.dir ) + '}%%\n';
+        s += graphContent;
+        return s;
+      } else {
         var s = '%%{init: ' + JSON.stringify( graph.dir ) + '}%%\n';
         s += graph.content;
         return s;
+      }
     };
 
     var init_func = function( attrs ){