feat: add support for mermaid diagrams (#244)

This commit is contained in:
Brendan Ang 2022-11-28 02:53:52 +08:00 committed by GitHub
parent f8d2495582
commit 523f4e67ae
5 changed files with 31 additions and 0 deletions

View File

@ -57,6 +57,9 @@ enableRecentNotes: false
enableGitHubEdit: true enableGitHubEdit: true
GitHubLink: https://github.com/jackyzha0/quartz/tree/hugo/content GitHubLink: https://github.com/jackyzha0/quartz/tree/hugo/content
# whether to render mermaid diagrams
enableMermaid: true
# whether to use Operand to power semantic search # whether to use Operand to power semantic search
# IMPORTANT: replace this API key with your own if you plan on using # IMPORTANT: replace this API key with your own if you plan on using
# Operand search! # Operand search!

View File

@ -11,6 +11,7 @@ enableFooter: true
enableContextualBacklinks: true enableContextualBacklinks: true
enableRecentNotes: false enableRecentNotes: false
enableGitHubEdit: true enableGitHubEdit: true
enableMermaid: true
GitHubLink: https://github.com/jackyzha0/quartz/tree/hugo/content GitHubLink: https://github.com/jackyzha0/quartz/tree/hugo/content
search: search:
enableSemanticSearch: false enableSemanticSearch: false

View File

@ -0,0 +1,4 @@
<div class="mermaid">
{{- .Inner | safeHTML }}
</div>
{{ .Page.Store.Set "hasMermaid" true }}

View File

@ -50,6 +50,8 @@
<script src="{{$s.Permalink}}"></script> <script src="{{$s.Permalink}}"></script>
{{end}} {{end}}
{{partial "katex.html" .}} {{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/core@0.7.3"></script>
<script src="https://unpkg.com/@floating-ui/dom@0.5.4"></script> <script src="https://unpkg.com/@floating-ui/dom@0.5.4"></script>
@ -145,6 +147,19 @@
} }
{{end}} {{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) => { const init = (doc = document) => {

View File

@ -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 }}