Hugo 主题支持 mermaid 和 LaTeX

2025-07-05

支持 LaTeX

在 layouts/partials/custom_head.html 中添加以下内容：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<script>
    MathJax = {
        tex: {
            inlineMath: [
                ['$', '$'],
                ['\\(', '\\)'],
            ],
        },
        svg: {
            fontCache: 'global',
        },
    };
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

就可以愉快的编写 latex 的数学公式了：

$$ \begin{aligned} \frac{d}{dx} \left( \int_{0}^{x} f(u) , du \right) &= \frac{d}{dx} \left( F(x) \right) \ &=f(x) \end{aligned} $$

支持 mermaid

在 layouts/partials/custom_body.html 中添加以下内容：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


{{ 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,
        theme: 'forest',
        flowchart: {
            useMaxWidth: true,
            htmlLabels: true
        },
        er: {
            useMaxWidth: true
        }
    });
</script>
{{ end }}

在 layouts/_markup/render-codeblock-mermaid.html 中添加以下内容：

1
2
3


<pre class="mermaid">
  {{ .Inner | htmlEscape | safeHTML }}
</pre>

  erDiagram
    CUSTOMER }|..|{ DELIVERY-ADDRESS : has
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER ||--o{ INVOICE : "liable for"
    DELIVERY-ADDRESS ||--o{ ORDER : receives
    INVOICE ||--|{ ORDER : covers
    ORDER ||--|{ ORDER-ITEM : includes
    PRODUCT-CATEGORY ||--|{ PRODUCT : contains
    PRODUCT ||--o{ ORDER-ITEM : "ordered in"

#Hugo #Mermaid #Latex