feat: add mermaid support (#75)

usage

1. enable mermaid in post's front matter, e.g.

   ---
   mermaid: true

2. include content with `<div>`, e.g.

   <div class="mermaid">
   graph TD;
       A-->B;
       A-->C;
       B-->D;
       C-->D;
   </div>

README.md

@@ -100,6 +100,7 @@ share | display post-share | boolean, override `displayPostShare` in `config.tom
 related | display related-posts | boolean, override `displayRelatedPosts` in `config.toml`, MemE only
 katex | add KaTeX support | boolean, override `enableKaTeX` in `config.toml`, MemE only
 mathjax | add MathJax support | boolean, override `enableMathJax` in `config.toml`, MemE only
+mermaid | add Mermaid support | boolean, override `enableMermaid` in `config.toml`, MemE only
 comments | set `false` to disable comments in mainSections or set `true` to enable comments in non-mainSections | boolean, MemE only
 smallCaps | small caps? | boolean, override `enableSmallCaps` in `config.toml`, MemE only
 dropCap | drop cap? | boolean, override `enableDropCap` in `config.toml`, MemE only

README.zh-cn.md

@@ -100,6 +100,7 @@ share | display post-share | boolean, override `displayPostShare` in `config.tom
 related | display related-posts | boolean, override `displayRelatedPosts` in `config.toml`, MemE only
 katex | add KaTeX support | boolean, override `enableKaTeX` in `config.toml`, MemE only
 mathjax | add MathJax support | boolean, override `enableMathJax` in `config.toml`, MemE only
+mermaid | add Mermaid support | boolean, override `enableMermaid` in `config.toml`, MemE only
 comments | set `false` to disable comments in mainSections or set `true` to enable comments in non-mainSections | boolean, MemE only
 smallCaps | small caps? | boolean, override `enableSmallCaps` in `config.toml`, MemE only
 dropCap | drop cap? | boolean, override `enableDropCap` in `config.toml`, MemE only

config-examples/en/config.toml

@@ -605,6 +605,15 @@ uglyURLs = false
     disableMathJaxMenu = false
 
 
+    ######################################
+    # Mermaid (https://github.com/mermaid-js/mermaid)
+
+    enableMermaid = false
+    # Note: *global settings*
+    #       `mermaid` in post’s Front Matter
+    #       has a higher priority than here
+
+
     ######################################
     # Comments
 

config-examples/zh-cn/config.toml

@@ -556,6 +556,15 @@ uglyURLs = false
     disableMathJaxMenu = false
 
 
+    ######################################
+    # Mermaid (https://github.com/mermaid-js/mermaid)
+
+    # 是否开启（全局设置）
+    enableMermaid = false
+    # 说明：文章的 Front Matter 中的 `mermaid`
+    #      的优先级高于此处
+
+
     ######################################
     # 评论
 

layouts/partials/script.html

@@ -60,6 +60,10 @@
     {{ partial "third-party/mathjax.html" . }}
 {{ end }}
 
+{{ if .Params.mermaid | default .Site.Params.enableMermaid }}
+    {{ partial "third-party/mermaid.html" . }}
+{{ end }}
+
 {{ if and (.Params.comments | default .Site.Params.enableComments) (eq hugo.Environment "production") }}
     {{ if or (in .Site.Params.mainSections .Section) .Params.comments }}
 

layouts/partials/third-party/mermaid.html

@@ -0,0 +1,11 @@
+<script src="https://cdn.jsdelivr.net/npm/mermaid@8.4.8/dist/mermaid.min.js"></script>
+<script>
+    var config = {
+        startOnLoad: true,
+        flowchart: {
+            useMaxWidth: false,
+            htmlLabels: true
+        }
+    };
+    mermaid.initialize(config);
+</script>