From 523f4e67aeac6f2c6525df3dc32ae0ee8bace5dd Mon Sep 17 00:00:00 2001 From: Brendan Ang <53790951+bbawj@users.noreply.github.com> Date: Mon, 28 Nov 2022 02:53:52 +0800 Subject: [PATCH] feat: add support for mermaid diagrams (#244) --- content/notes/config.md | 3 +++ data/config.yaml | 1 + .../_markup/render-codeblock-mermaid.html | 4 ++++ layouts/partials/head.html | 15 +++++++++++++++ layouts/partials/mermaid.html | 8 ++++++++ 5 files changed, 31 insertions(+) create mode 100644 layouts/_default/_markup/render-codeblock-mermaid.html create mode 100644 layouts/partials/mermaid.html diff --git a/content/notes/config.md b/content/notes/config.md index d6321b39..f0e63e4d 100644 --- a/content/notes/config.md +++ b/content/notes/config.md @@ -57,6 +57,9 @@ enableRecentNotes: false enableGitHubEdit: true GitHubLink: https://github.com/jackyzha0/quartz/tree/hugo/content +# whether to render mermaid diagrams +enableMermaid: true + # whether to use Operand to power semantic search # IMPORTANT: replace this API key with your own if you plan on using # Operand search! diff --git a/data/config.yaml b/data/config.yaml index 6e1c75cc..106eeb8b 100644 --- a/data/config.yaml +++ b/data/config.yaml @@ -11,6 +11,7 @@ enableFooter: true enableContextualBacklinks: true enableRecentNotes: false enableGitHubEdit: true +enableMermaid: true GitHubLink: https://github.com/jackyzha0/quartz/tree/hugo/content search: enableSemanticSearch: false diff --git a/layouts/_default/_markup/render-codeblock-mermaid.html b/layouts/_default/_markup/render-codeblock-mermaid.html new file mode 100644 index 00000000..59641551 --- /dev/null +++ b/layouts/_default/_markup/render-codeblock-mermaid.html @@ -0,0 +1,4 @@ +
+ {{- .Inner | safeHTML }} +
+{{ .Page.Store.Set "hasMermaid" true }} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index ba18b4cc..b5b01549 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -50,6 +50,8 @@ {{end}} {{partial "katex.html" .}} + + {{partial "mermaid.html" .}} @@ -145,6 +147,19 @@ } {{end}} + + {{if $data.enableMermaid | default $.Site.Data.config.enableMermaid}} + var els = document.getElementsByClassName("mermaid"); + if (els.length > 0) { + import('https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs').then( + (obj) => { + // init forces mermaid to render mermaid markdown without waiting + // for DOMContentLoaded event + obj.default.init(); + } + ) + } + {{end}} } const init = (doc = document) => { diff --git a/layouts/partials/mermaid.html b/layouts/partials/mermaid.html new file mode 100644 index 00000000..09d348b5 --- /dev/null +++ b/layouts/partials/mermaid.html @@ -0,0 +1,8 @@ +{{if $.Site.Data.config.enableMermaid}} + {{ if .Page.Store.Get "hasMermaid" }} + + {{ end }} +{{ end }}