Hugo支持渲染mermaid图

Sun, 14 Apr 2024 13:47:57 +0800

Hugo个人博客搭建过程参考Hugo个人博客搭建

sequenceDiagram
	participant Alice 
	participant Bob 
	Alice->>Bob: Hello Bob!
	Bob->>Alice: Hello Alice!

在layouts目录下创建_default目录，拷贝主题下对应的内容

mkdir -p layouts/_default
cp themes/hugo-PaperMod-master/layouts/_default/baseof.html layouts/_default/
vim layouts/_default/baseof.html

在文件后面增加以下内容

{{ 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 }}

在layouts/_default目录下创建_markup目录

mkdir -p layouts/_default/_markup
vim layouts/_default/_markup/render-codeblock-mermaid.html

render-codeblock-mermaid.html文件内容如下

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

Mermaid on ByteJog

Hugo支持渲染mermaid图