首先在 layouts/partials 下添加 mermaid.html：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <script type="module">
import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
mermaid.initialize({ startOnLoad: true });
</script>
<script>
// Replace mermaid pre.code to div
Array.from(document.getElementsByClassName("language-mermaid")).forEach(
(el) => {
el.parentElement.outerHTML = `<div class="mermaid">${el.innerHTML}</div>`;
},
);
</script>
<style>
/* Set svg to center */
.mermaid svg {
display: block;
margin: auto;
}
</style>
|
然后在 layouts/partials/_default 下的 single.html 中添加 mermaid 组件的引入：
1
2
| <!-- mermaid -->
{{- partial "mermaid.html" . -}}
|
最后设置配置文件中对于语法高亮中的 guessSyntax 为 false：
1
2
3
| markup:
highlight:
gussSyntax: false
|
至此，对于在 markdown 中的 mermaid 代码就可以正确渲染了。