feat: add support for mermaid diagrams (jackyzha0#244)

content/notes/config.md

@@ -57,6 +57,9 @@ enableRecentNotes: false
 enableGitHubEdit: true
 GitHubLink: https://github.com/jackyzha0/quartz/tree/hugo/content
 
+# whether to render mermaid diagrams
+enableMermaid: true
+
 # whether to use Operand to power semantic search
 # IMPORTANT: replace this API key with your own if you plan on using
 # Operand search!

data/config.yaml

@@ -11,6 +11,7 @@ enableFooter: true
 enableContextualBacklinks: true
 enableRecentNotes: false
 enableGitHubEdit: true
+enableMermaid: true
 GitHubLink: https://github.com/jackyzha0/quartz/tree/hugo/content
 search:
   enableSemanticSearch: false

layouts/_default/_markup/render-codeblock-mermaid.html

@@ -0,0 +1,4 @@
+<div class="mermaid">
+  {{- .Inner | safeHTML }}
+</div>
+{{ .Page.Store.Set "hasMermaid" true }}

layouts/partials/head.html

@@ -50,6 +50,8 @@
   <script src="{{$s.Permalink}}"></script>
   {{end}}
   {{partial "katex.html" .}}
+
+  {{partial "mermaid.html" .}}
 
   <script src="https://unpkg.com/@floating-ui/core@0.7.3"></script>
   <script src="https://unpkg.com/@floating-ui/dom@0.5.4"></script>
@@ -145,6 +147,19 @@
 
         }
       {{end}}
+
+      {{if $data.enableMermaid | default $.Site.Data.config.enableMermaid}}
+        var els = document.getElementsByClassName("mermaid");
+        if (els.length > 0) {
+          import('https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs').then(
+            (obj) => {
+              // init forces mermaid to render mermaid markdown without waiting
+              // for DOMContentLoaded event
+              obj.default.init();
+            }
+          )
+        }
+      {{end}}
     }
 
     const init = (doc = document) => {

layouts/partials/mermaid.html

@@ -0,0 +1,8 @@
+{{if $.Site.Data.config.enableMermaid}}
+  {{ if .Page.Store.Get "hasMermaid" }}
+    <script type="module">
+      import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+      mermaid.initialize({ startOnLoad: true });
+    </script>
+  {{ end }}
+{{ end }}