Hugo Blogにmermaidを導入する

はじめに

ブログを書いていて mermaid形式のデータを取り扱えるようにしたいなと思ったので導入してみる。

※追記
ショートコードではなく、https://gohugo.io/render-hooks/code-blocks/#examples にあるように、render-codeblock-mermaid.htmlを定義する記述の方法が楽なのでこうしたほうが良い。

環境

Docker Desktop 4.33.1 (161083)
hugo v0.122.0+extended linux/amd64 BuildDate=unknown

Shotcodeを作る

`layouts/partials` 以下のファイルを修正

custom_head.htmlに以下の修正を加える。

<!-- For mermaid -->
{{ partial "mermaid.html" . }}

同じ階層に mermaid.htmlを以下のように作成する。

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.9.1/mermaid.min.js"></script>
<script>
  mermaid.initialize({ startOnLoad: true });
</script>

上記でCDNから利用できるようにする。

`layouts/shortcodes/mermaid.html` を作成する

<div class="mermaid">
    {{ .Inner | safeHTML }}
</div>

試す

下記のコードで試す。

{{ < mermaid > }}
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
{{ < /mermaid > }}

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

おぉ！できてる！

参考

ChatGPT
https://chatgpt.com/c/6f025ff1-6d71-4697-a48b-05d6023d774c
Hugoでmermaidを使う
https://www.blue271828.com/howtos/hugo%E3%81%A7mermaid%E3%82%92%E4%BD%BF%E3%81%86/

おわりに

今後、mermaid形式のものをブログで表示したかったので導入した。
参考記事に感謝です。