feat: add support for Mermaid diagrams in Markdown content (#1186)

* Add support for Mermaid diagrams in markdown content

This commit introduces native Mermaid diagram rendering to the theme.

Following Hugo’s official documentation, a new custom code block renderer
(`render-codeblock-mermaid.html`) was added under `layouts/_default/` to
detect Mermaid code blocks and inject the necessary script flag into the
page context.

Additionally, the `baseof.html` template now conditionally includes the
Mermaid JS module from the CDN when a page contains a Mermaid diagram:

  {{ 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, theme: 'neutral' });
    </script>
  {{ end }}

This enables rendering of fenced code blocks using the `mermaid` language
in markdown files without requiring any external preprocessing.

* Create article/components/mermaid and fix script version

---------

Co-authored-by: Jimmy <jimmy@cai.im>
This commit is contained in:
Mikael F. Aldebrand
2025-12-22 13:40:33 +01:00
committed by GitHub
co-authored by Jimmy
parent 47db505228
commit ba9a5caa16
3 changed files with 14 additions and 0 deletions
@@ -0,0 +1,4 @@
<pre class="mermaid">
{{ .Inner | htmlEscape | safeHTML }}
</pre>
{{ .Page.Store.Set "hasMermaid" true }}
+1
View File
@@ -39,6 +39,7 @@
{{ partialCached "footer/footer" . }} {{ partialCached "footer/footer" . }}
{{ partialCached "article/components/photoswipe" . }} {{ partialCached "article/components/photoswipe" . }}
{{ partialCached "article/components/mermaid" . }}
{{ end }} {{ end }}
{{ define "right-sidebar" }} {{ define "right-sidebar" }}
@@ -0,0 +1,9 @@
{{ if .Store.Get "hasMermaid" }}
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11.12.2/+esm';
mermaid.initialize({
startOnLoad: true,
theme: 'neutral',
});
</script>
{{ end }}