曾经翻网站翻博客找半天的答案，在 Gemini 的加持下，五分钟搞定

第一步：创建 Mermaid 的渲染钩子

这个步骤是为了告诉 Hugo：当遇到语言标记为 mermaid 的代码块时，不要高亮代码，而是将其包装在一个 div 中，以便 JavaScript 库进行渲染。

• 在你的 Hugo 站点根目录下（注意不是在 themes 目录里），找到或创建 layouts 文件夹。
• 建立如下目录结构和文件： layouts/_default/_markup/render-codeblock-mermaid.html
• 在该文件中粘贴以下代码：

1
2
3
4

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

第二步：引入 Mermaid JavaScript 库

我们需要将 Mermaid 的核心 JS 脚本注入到页面底部。hugo-theme-stack 主题预留了自定义页脚文件的位置。

1. 在站点根目录下，创建文件： layouts/partials/footer/custom.html (如果该文件已存在，直接在里面追加代码即可)
2. 在该文件中粘贴以下代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{{ if .Page.Store.Get "hasMermaid" }}
<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ 
    startOnLoad: true,
    theme: 'base', // 或者 'default', 'forest', 'neutral'
    securityLevel: 'loose',
  });
</script>
{{ end }}

大功告成！