arianpg/mermaid コードブロックでの表示

コードブロックからmermaid変換表示させる

• 参考リンク
  • Hugoでショートコードを使わずにmerimaidを利用する

onload処理の追加

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.4.4/mermaid.min.js"></script>
<script>
window.onload = function() {
  mermaid.init(undefined, ".language-mermaid");
};
</script>

出力確認

graph LR
subgraph Netlify
  MD(Markdown) --Hugo--> SH(Codeblock HTML)
end
subgraph Client
  SH --mermaid.js--> FH(Flow)
end

graph LR
subgraph Netlify
  MD(Markdown) --Hugo--> SH(Codeblock HTML)
end
subgraph Client
  SH --mermaid.js--> FH(Flow)
end

Hugoでのシンタックスハイライト有効時は、背景色の調整がうまく行かない・・