Hugo博客添加Mermaid作图
Hugo 博客添加 Mermaid 作图以及 Mermaid 的简单使用
添加 Mermaid 支持
定位到PaperModlayouts/partials/footer.html并在末尾添加：
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.6.0/mermaid.min.js" crossorigin="anonymous"></script>
<script>
mermaid.init(undefined, '.language-mermaid');
</script>
创建并编辑PaperMod/layouts/shortcodes/mermaid.html文件：
{{ $_hugo_config := `{ "version": 1 }` }}
<div class="mermaid" align="{{ if .Get "align" }}{{ .Get "align" }}{{ else }}center{{ end }}">{{ safeHTML .Inner }}</div>
Mermaid 作图效果展示
Markdown中直接使用 mermaid 作图的源码是：
```mermaid
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
```
要想得到类似的效果，需要一定程度上的修改：
# 以下 mermaid 的尖括弧外侧没有空格的，我这样写是为了防止转义
{{ < mermaid align="center" > }}
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[Car]
{{ < /mermaid > }}
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[Car]
这里我总觉得这种方式不够优雅，希望能直接编译 Markdown 形式写出来的代码，有找到解决方法的小伙伴请评论区告知！
参考文档
💬 评论