Hugoでmermaid.jsを使いたい。
解決策
カスタムshortcodeを作成する方法もあるようですが、 今回は、Markdown Render Hooksを方法を採用します。
layouts/_default/_markup/render-codeblock-mermaid.htmlを作成します。
<div class="mermaid">
{{- .Inner | safeHTML }}
</div>
{{ .Page.Store.Set "hasMermaid" true }}
これは、コード例のようなmermaidのコードブロックがあったときに、以下を実行します。
<div class='mermaid'/>内に、記載コードをそのまま出力- ページストアで、hasMermaid に true を設定
あとは、layouts/_default/baseof.html内で、ページストアで、hasMermaidが設定されてい場合のみ、mermaid.jsを読み込み初期化するようにすれば、mermaid.jsが動きます。
実際の表示例を確認ください。
{{ if .Page.Store.Get "hasMermaid" }}
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({ startOnLoad: true });
</script>
{{ end }}
コードブロック例
~~~mermaid
flowchart TD
Start --> Stop
~~~
実行例
flowchart TD
Start --> Stop