Test Mermaid
Create a Partial for Mermaid Initialization Create a new file in your layouts/partials directory named mermaid-init.html. Add the following code to mermaid-init.html: HTML 1 2 3 4 <script type="module"> import mermaid from '/js/mermaid.esm.min.mjs'; mermaid.initialize({ startOnLoad: true }); </script> Create a Shortcode for mermaid Create a new file named mermaid.html in layouts/shortcodes/. Add the follwoing code to mermaid.html: 1 2 3 4 5 6 7 8 9 10 11 12 13 {{- $scratch := .Page.Scratch -}} {{- if not ($scratch.Get "mermaid-counter") -}} {{- $scratch.Set "mermaid-counter" 1 -}} {{- partial "mermaid-init.html" . -}} {{- else -}} {{- $scratch.Add "mermaid-counter" 1 -}} {{- end -}} {{- $id := printf "mermaid-%d" ($scratch.Get "mermaid-counter") -}} <div id="{{ $id }}"> <pre class="mermaid"> {{- .Inner | safeHTML }} </pre> </div> Explanation of Changes: ...
