feat: 支持以代碼塊形式書寫 mermaid closed #1479

_config.yml

@@ -811,11 +811,13 @@ abcjs:
   enable: false
   per_page: true
 
-# mermaid
-# see https://github.com/mermaid-js/mermaid
+# Mermaid
+# See https://github.com/mermaid-js/mermaid
 mermaid:
-  enable: false
-  # built-in themes: default/forest/dark/neutral
+  enable: true
+  # Write Mermaid diagrams using code blocks （以代碼塊形式書寫 Mermaid）
+  code_write: false 
+  # Built-in themes: default/forest/dark/neutral
   theme:
     light: default
     dark: dark

layout/includes/third-party/math/mermaid.pug

@@ -26,7 +26,20 @@ script.
       })
     }
 
+    const codeToMermaid = () => {
+      const codeMermaidEle = document.querySelectorAll('pre > code.mermaid')
+      if (codeMermaidEle.length === 0) return
+
+      codeMermaidEle.forEach(ele => {
+        const newEle = document.createElement('div')
+        newEle.className = 'mermaid-wrap'
+        newEle.innerHTML = `<pre class="mermaid-src" hidden>${ele.textContent}</pre>`
+        ele.parentNode.replaceWith(newEle)
+      })
+    }
+
     const loadMermaid = () => {
+      if (!{theme.mermaid.code_write}) codeToMermaid()
       const $mermaid = document.querySelectorAll('#article-container .mermaid-wrap')
       if ($mermaid.length === 0) return
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "4.14.0-b1",
+  "version": "4.14.0-b2",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {