Hugoにmermaidを適用する

Posted by utimukat55 on Sunday, July 7, 2019

TOC

Hugoにmermaidを適用する

mermaidとは

クラス図とかシーケンス図を所定の書き方で書くと画像として表示してくれる素敵ライブラリです。

https://github.com/knsv/mermaid

今回の導入手順は他サイト様1を参考にしています。

Hugoへの導入

ダウンロード

https://unpkg.com/mermaid@8.1.0/dist/ から mermaid.min.js をダウンロードします。ローカルでのファイル名はバージョン名を入れたmermaid.min8.1.jsにします。

配置

mermaid.min.jsの場所ですが参考サイトではthemesの下に配置してましたが、テーマを切り替えても動くように直下のstatic/jsに置きます。ダウンロードと配置2つあわせてhugoに潜っていった方が楽ですね。

$ mkdir ~/hugo_work/ro_followup/static/js
$ cd ~/hugo_work/ro_followup/static/js
$ wget https://unpkg.com/mermaid@8.1.0/dist/mermaid.min.js
$ mv mermaid.min.js mermaid.min8.1.js

shortcode作成

layouts/shortcodesディレクトリに以下の内容でmermaid.htmlを作成します。

<script src="{{"js/mermaid.min8.1.js" | relURL}}" defer></script>
<div class="mermaid" align="{{ if .Get "align" }}{{ .Get "align" }}{{ else }}center{{ end }}">
    {{ safeHTML .Inner }}
</div>

楽でいいですね。これまでMermaid Live Editorで表示させたsvg画像をハードコピーを撮っていましたがmermaidを使用するよう変更しました。

Hugoを使ったblogをGitLab CIを使ってGitLab Pagesで公開する


comments powered by Disqus

See Also