Support for Mermaid JS in Markdown content

[colinbruner]

Hi,

Hugo's documentation supports Mermaid Diagrams via Mermaid JS and I was hoping we could get this added to the theme.

I was able to get this working locally with the diff below. I'm pretty new to Hugo, so I'm unsure if this is the best place to add this functionality (specifically within single.html).

diff --git a/layouts/_default/_markup/render-codeblock-mermaid.html b/layouts/_default/_markup/render-codeblock-mermaid.html
new file mode 100644
index 0000000..7e12ad7
--- /dev/null
+++ b/layouts/_default/_markup/render-codeblock-mermaid.html
@@ -0,0 +1,4 @@
+<pre class="mermaid">
+    {{- .Inner | safeHTML }}
+</pre>
+  {{ .Page.Store.Set "hasMermaid" true }}
\ No newline at end of file
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 19a624f..860fe56 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -42,6 +42,13 @@
   </div>
   {{- end }}

+  {{ if .Page.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 }}
+
   <footer class="post-footer">
     {{- $tags := .Language.Params.Taxonomies.tag | default "tags" }}
     <ul class="post-tags">

I'll create a PR shortly for review, would appreciate any feedback or guidance!

[colinbruner]

**NOTE**: PaperMod does not have any external dependencies fetched from 3rd party
CDN servers. However we do have custom Head/Footer extender templates which you can use
to add those to your website.
https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#custom-head--footer

I did see this note when opening a PR, I'm going to explore this avenue. I do appreciate the desire not to bake in fetching things from 3rd party CDN servers to the greater theme.

[colinbruner]

Okay, I was able to get this working with the custom footer approach.. although I don't seem to have access to any values in .Page.Store.. will look for a different way of conditionally rendering it as I wouldn't want to pull this script from the CDN on Markdown pages that do not use Mermaid.js

[colinbruner]

It looks like we might need the functionality described in https://github.com/adityatelange/hugo-PaperMod/pull/1356 to more selectively add code under .Content like Mermaid.js

[fira42073]

Hey! I appreciate your efforts here! I was wondering what's the workaround you came to?

I want to use this theme, because it looks great and it covers all of my needs, but having mermaid support is crucial for me.

Thanks in advance!