Enable rendering Mermaid diagrams (#5354)

Signed-off-by: t-kikuc <[email protected]>
pipe-cd · Nov 20, 2024 · fc49f59 · fc49f59
1 parent 7e5d4ea
commit fc49f59
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/docs/layouts/_default/_markup/render-codeblock-mermaid.html b/docs/layouts/_default/_markup/render-codeblock-mermaid.html
@@ -0,0 +1,5 @@
+{{/*  Enable rendering Mermaid diagrams. See https://gohugo.io/content-management/diagrams/#mermaid-diagrams.  */}}
+<pre class="mermaid">
+    {{- .Inner | safeHTML }}
+</pre>
+{{ .Page.Store.Set "hasMermaid" true }}
diff --git a/docs/layouts/partials/scripts.html b/docs/layouts/partials/scripts.html
@@ -18,3 +18,11 @@
 <script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>
 {{ end }}
 {{ partial "hooks/body-end.html" . }}
+
+{{/*  Enable rendering Mermaid diagrams. See https://gohugo.io/content-management/diagrams/#mermaid-diagrams.   */}}
+{{ if .Store.Get "hasMermaid" }}
+  <script type="module">
+    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
+    mermaid.initialize({ startOnLoad: true });
+  </script>
+{{ end }}