diff options
| -rw-r--r-- | assets/css/main.css | 7 | ||||
| -rw-r--r-- | layouts/_default/_markup/render-codeblock-mermaid.html | 4 | ||||
| -rw-r--r-- | layouts/partials/head/index.html | 30 |
3 files changed, 41 insertions, 0 deletions
diff --git a/assets/css/main.css b/assets/css/main.css index 029324f..8c8b0b8 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -127,6 +127,13 @@ pre code { padding: 0; } +pre.mermaid { + background: transparent; + border: none; + padding: 0; + text-align: center; +} + figure { margin-bottom: 1.25rem; } diff --git a/layouts/_default/_markup/render-codeblock-mermaid.html b/layouts/_default/_markup/render-codeblock-mermaid.html new file mode 100644 index 0000000..d22d89e --- /dev/null +++ b/layouts/_default/_markup/render-codeblock-mermaid.html @@ -0,0 +1,4 @@ +{{- .Page.Store.Set "hasMermaid" true -}} +<pre class="mermaid"> + {{- .Inner | safeHTML -}} +</pre> diff --git a/layouts/partials/head/index.html b/layouts/partials/head/index.html index d2b3826..85f73eb 100644 --- a/layouts/partials/head/index.html +++ b/layouts/partials/head/index.html @@ -4,3 +4,33 @@ {{- if or (.HasShortcode "chart") (.HasShortcode "perf-chart") -}} <script src="https://cdn.jsdelivr.net/npm/chart.js" defer></script> {{- end -}} + +{{- if .Page.Store.Get "hasMermaid" -}} +<script type="module"> + import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs'; + + function getMermaidTheme() { + return localStorage.getItem('theme') === 'dark' ? 'dark' : 'default'; + } + + // Save original sources before mermaid replaces them with SVG + document.querySelectorAll('pre.mermaid').forEach(el => { + el.setAttribute('data-mermaid-src', el.textContent); + }); + + mermaid.initialize({ startOnLoad: true, theme: getMermaidTheme() }); + + // Re-render on theme toggle (detected via class change on <html>) + new MutationObserver(() => { + document.querySelectorAll('pre.mermaid').forEach(el => { + const src = el.getAttribute('data-mermaid-src'); + if (src) { + el.removeAttribute('data-processed'); + el.textContent = src; + } + }); + mermaid.initialize({ startOnLoad: false, theme: getMermaidTheme() }); + mermaid.run(); + }).observe(document.documentElement, { attributes: true, attributeFilter: ['class'] }); +</script> +{{- end -}} |