diff options
| -rw-r--r-- | layouts/_default/single.html | 12 | ||||
| -rw-r--r-- | static/js/mermaid.js | 28 | ||||
| -rw-r--r-- | wiki/features/other-parameters.md | 8 |
3 files changed, 43 insertions, 5 deletions
diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 159c328..6869a46 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -73,13 +73,17 @@ </div> {{ 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 }); + {{ $mermaidDarkTheme := default "dark" (or .Params.mermaidDarkTheme .Site.Params.mermaidDarkTheme) }} + {{ $mermaidTheme := default "default" (or .Params.mermaidTheme .Site.Params.mermaidTheme) }} + <script defer + type="module" + id="mermaid_script" + data-light-theme="{{ $mermaidTheme }}" + data-dark-theme="{{ $mermaidDarkTheme }}" + src='{{ "js/mermaid.js" | relURL }}'> </script> {{ end }} - {{/* Next prev controls */}} {{ if not (.Param "hidePagination") }} diff --git a/static/js/mermaid.js b/static/js/mermaid.js new file mode 100644 index 0000000..c348dc6 --- /dev/null +++ b/static/js/mermaid.js @@ -0,0 +1,28 @@ +import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs'; + +const this_js_script = document.getElementById('mermaid_script'); +const light_theme = this_js_script.getAttribute('data-light-theme'); +const dark_theme = this_js_script.getAttribute('data-dark-theme'); + +function runmermaid() { + const theme = (document.body.classList.contains('dark') ? dark_theme : light_theme) + mermaid.initialize({ startOnLoad: false, theme: theme}); + const items = document.querySelectorAll('.mermaid'); + let counter = 0; + for (const item of items) { + const id = counter++; + if(item.originalCode === undefined) { + item.originalCode = item.textContent.trim(); + } + mermaid.render("mermaid"+id, item.originalCode).then((val) => { + item.innerHTML = val.svg + }, (err) => { + console.log(err); + // Workaround: move incorrectly placed error messages into their diagram + item.innerHTML = ""; + item.appendChild(document.getElementById("mermaid" + id)); + }); + } +} +document.addEventListener('DOMContentLoaded', runmermaid); +window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', runmermaid); diff --git a/wiki/features/other-parameters.md b/wiki/features/other-parameters.md index 2c4cfb0..136698e 100644 --- a/wiki/features/other-parameters.md +++ b/wiki/features/other-parameters.md @@ -89,4 +89,10 @@ You can easily generate favicons using [this website](https://realfavicongenerat ## Mermaid Diagrams -Mermaid diagrams are supported by theme, just follow [this reference](https://gohugo.io/content-management/diagrams/#mermaid-diagrams) to use them.
\ No newline at end of file +Mermaid diagrams are supported, just follow [this reference](https://gohugo.io/content-management/diagrams/#mermaid-diagrams) to use them. You can set Mermaid's light- and dark themes in your config; they switch with your blog's light/dark state. These are the defaults: + +```toml +[params] +mermaidTheme = "default" +mermaidDarkTheme = "dark" +``` |