Initial support for mermaid.js in markdown

contentlayer.config.ts

@@ -157,6 +157,7 @@ export default makeSource({
   documentTypes: [Docs, Posts, Coordinators, FaqDevelopers, FaqUsers],
   markdown: {
     remarkPlugins: [remarkGfm],
-    rehypePlugins: [rehypeHighlight],
+    // ignore mermaid for highlighting (```mermaid ... ```)
+    rehypePlugins: [[rehypeHighlight, { plainText: ['mermaid'] }]],
   },
 })

lib/customMarked.ts

@@ -0,0 +1,18 @@
+import { marked } from 'marked'
+
+marked.use({
+    gfm: true,
+  })
+
+export const MERMAID_SNIPPET = '<pre class="mermaid">'
+
+
+const renderer = new marked.Renderer();
+renderer.code = function (code, language) {
+  if (language === 'mermaid') {
+    return MERMAID_SNIPPET + code + '</pre>';
+  } else {
+    return '<pre><code>' + code + '</code></pre>';
+  }
+};
+export const mdToHtml = (src: string) => marked(src, { renderer: renderer })

lib/utils.ts

@@ -1,14 +1,10 @@
 import fs from 'fs'
 import path from 'path'
 import matter from 'gray-matter'
-import { marked } from 'marked'
+import { mdToHtml, MERMAID_SNIPPET } from './customMarked'
 import { insertIdsToHeaders } from './markdownToHtml'
 import { DocAnchorLinksType, VersionDocType } from '@/types/types'
 
-marked.use({
-  gfm: true,
-})
-
 export function slugify(input: string): string {
   return input
     .toLowerCase()
@@ -24,7 +20,7 @@ function compileMarkdownToHTML(markdown: string): {
   anchorLinks: VersionDocType['anchorLinks']
 } {
   const { content } = matter(markdown)
-  const markedHtml = marked(content)
+  const markedHtml = mdToHtml(content)
   const { html, anchorLinks } = insertIdsToHeaders(markedHtml)
   return {
     html,
@@ -103,6 +99,18 @@ export function generateVersionDocs(
         html += compiledHTML
       }
     }
+    // inject script to make mermaid js work its magic
+    if (html.includes(MERMAID_SNIPPET)) {
+      html += `<script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
+      <script>
+      mermaid.initialize({
+        startOnLoad:true,
+        htmlLabels:true,
+        theme: 'base'
+      });
+      </script>
+      `
+    }
 
     topics.push({
       title: topic,

styles/_md-styles.scss

@@ -155,7 +155,7 @@
     content: '';
   }
 
-  & pre {
+  & pre:not(.mermaid) {
     color: var(--color-light);
     background-color: rgba(0, 0, 0, 0.75);
     overflow-x: auto;