Hugo 主题支持 mermaid 和 LaTeX
支持 LaTeX
在 layouts/partials/custom_head.html 中添加以下内容：
<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 中添加以下内容：
{{ 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 中添加以下内容：
<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"