最近研究英文的官方文档发现了HUGO官方给渲染Mermaid提供了思路（!原来Hugo可以支持这种渲染），此处做笔记记录，算作是另一种方式。

上一篇指路：

官方文档指路Diagrams | Hugo (gohugo.io)

新建html

我们在路径layouts/_default/_markup/下新建render-codeblock-mermaid.html，并在其中填入

1
2
3
4

<pre class="mermaid">
    {{- .Inner | safeHTML }}
  </pre>
{{ .Page.Store.Set "hasMermaid" true }}

引入

在路径layouts/_default/下的single.html中加入下面部分的代码：

1
2
3
4
5
6

{{ if .Store.Get "hasMermaid" }}
  <script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
  </script>
{{ end }}

设置之后应该就可以直接使用渲染啦~（ps:之前的方法依然是有效的