From 5f3d4306997e87437b4c9de97aa9eed355133965 Mon Sep 17 00:00:00 2001
From: Brendan Ang <53790951+bbawj@users.noreply.github.com>
Date: Sun, 27 Nov 2022 18:53:52 +0000
Subject: [PATCH] feat: add support for mermaid diagrams (#244)
---
content/notes/config.md | 3 +++
data/config.yaml | 1 +
layouts/partials/mermaid.html | 8 ++++++++
layouts/partials/head.html | 15 +++++++++++++++
layouts/_default/_markup/render-codeblock-mermaid.html | 4 ++++
5 files changed, 31 insertions(+), 0 deletions(-)
diff --git a/content/notes/config.md b/content/notes/config.md
index d6321b3..f0e63e4 100644
--- a/content/notes/config.md
+++ b/content/notes/config.md
@@ -57,6 +57,9 @@
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 6e1c75c..106eeb8 100644
--- a/data/config.yaml
+++ b/data/config.yaml
@@ -11,6 +11,7 @@
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 0000000..5964155
--- /dev/null
+++ b/layouts/_default/_markup/render-codeblock-mermaid.html
@@ -0,0 +1,4 @@
+<div class="mermaid">
+ {{- .Inner | safeHTML }}
+</div>
+{{ .Page.Store.Set "hasMermaid" true }}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index ba18b4c..b5b0154 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -50,6 +50,8 @@
<script src="{{$s.Permalink}}"></script>
{{end}}
{{partial "katex.html" .}}
+
+ {{partial "mermaid.html" .}}
<script src="https://unpkg.com/@floating-ui/core@0.7.3"></script>
<script src="https://unpkg.com/@floating-ui/dom@0.5.4"></script>
@@ -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 0000000..09d348b
--- /dev/null
+++ b/layouts/partials/mermaid.html
@@ -0,0 +1,8 @@
+{{if $.Site.Data.config.enableMermaid}}
+ {{ if .Page.Store.Get "hasMermaid" }}
+ <script type="module">
+ import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+ mermaid.initialize({ startOnLoad: true });
+ </script>
+ {{ end }}
+{{ end }}
--
Gitblit v1.10.0