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

2026-04-08 12:07:06 +08:00 · 2024-04-10 16:35:14 +08:00
parent 9e0dce6c7a
commit ae35499658
6 changed files with 192 additions and 171 deletions
--- a/_config.yml
+++ b/_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
--- a/layout/includes/third-party/math/mermaid.pug
+++ b/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

--- a/package.json
+++ b/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": {
--- a/plugins.yml
+++ b/plugins.yml
@@ -1,31 +1,55 @@
+abcjs_basic_js:
+  name: abcjs
+  file: dist/abcjs-basic-min.js
+  version: 6.3.0
+activate_power_mode:
+  name: butterfly-extsrc
+  file: dist/activate-power-mode.min.js
+  version: 1.1.3
 algolia_search:
  name: algoliasearch
  file: dist/algoliasearch-lite.umd.js
  version: 4.23.2
-instantsearch:
-  name: instantsearch.js
-  file: dist/instantsearch.production.min.js
-  version: 4.66.1
-pjax:
-  name: pjax
-  file: pjax.min.js
-  version: 0.2.8
-gitalk:
-  name: gitalk
-  file: dist/gitalk.min.js
-  version: 1.8.0
-gitalk_css:
-  name: gitalk
-  file: dist/gitalk.css
-  version: 1.8.0
+aplayer_css:
+  name: aplayer
+  file: dist/APlayer.min.css
+  version: 1.10.1
+aplayer_js:
+  name: aplayer
+  file: dist/APlayer.min.js
+  version: 1.10.1
+artalk_css:
+  name: artalk
+  file: dist/Artalk.css
+  version: 2.8.3
+artalk_js:
+  name: artalk
+  file: dist/Artalk.js
+  version: 2.8.3
 blueimp_md5:
  name: blueimp-md5
  file: js/md5.min.js
  version: 2.19.0
-valine:
-  name: valine
-  file: dist/Valine.min.js
-  version: 1.5.1
+canvas_fluttering_ribbon:
+  name: butterfly-extsrc
+  file: dist/canvas-fluttering-ribbon.min.js
+  version: 1.1.3
+canvas_nest:
+  name: butterfly-extsrc
+  file: dist/canvas-nest.min.js
+  version: 1.1.3
+canvas_ribbon:
+  name: butterfly-extsrc
+  file: dist/canvas-ribbon.min.js
+  version: 1.1.3
+clickShowText:
+  name: butterfly-extsrc
+  file: dist/click-show-text.min.js
+  version: 1.1.3
+click_heart:
+  name: butterfly-extsrc
+  file: dist/click-heart.min.js
+  version: 1.1.3
 disqusjs:
  name: disqusjs
  file: dist/browser/disqusjs.es2015.umd.min.js
@@ -34,32 +58,56 @@ disqusjs_css:
  name: disqusjs
  file: dist/browser/styles/disqusjs.css
  version: 3.0.2
-twikoo:
-  name: twikoo
-  file: dist/twikoo.all.min.js
-  version: 1.6.32
-waline_js:
-  name: '@waline/client'
-  file: dist/waline.js
-  other_name: waline
-  version: 3.1.3
-waline_css:
-  name: '@waline/client'
-  file: dist/waline.css
-  other_name: waline
-  version: 3.1.3
-sharejs:
+docsearch_css:
+  name: '@docsearch/css'
+  other_name: docsearch-css
+  file: dist/style.css
+  version: 3.6.0
+docsearch_js:
+  name: '@docsearch/js'
+  other_name: docsearch-js
+  file: dist/umd/index.js
+  version: 3.6.0
+egjs_infinitegrid:
+  name: '@egjs/infinitegrid'
+  other_name: egjs-infinitegrid
+  file: dist/infinitegrid.min.js
+  version: 4.11.1
+fancybox:
+  name: '@fancyapps/ui'
+  file: dist/fancybox/fancybox.umd.js
+  version: 5.0.35
+  other_name: fancyapps-ui
+fancybox_css:
+  name: '@fancyapps/ui'
+  file: dist/fancybox/fancybox.css
+  version: 5.0.35
+  other_name: fancyapps-ui
+fireworks:
  name: butterfly-extsrc
-  file: sharejs/dist/js/social-share.min.js
+  file: dist/fireworks.min.js
  version: 1.1.3
-sharejs_css:
-  name: butterfly-extsrc
-  file: sharejs/dist/css/share.min.css
-  version: 1.1.3
-mathjax:
-  name: mathjax
-  file: es5/tex-mml-chtml.js
-  version: 3.2.2
+fontawesome:
+  name: '@fortawesome/fontawesome-free'
+  file: css/all.min.css
+  other_name: font-awesome
+  version: 6.5.1
+gitalk:
+  name: gitalk
+  file: dist/gitalk.min.js
+  version: 1.8.0
+gitalk_css:
+  name: gitalk
+  file: dist/gitalk.css
+  version: 1.8.0
+instantpage:
+  name: instant.page
+  file: instantpage.js
+  version: 5.2.0
+instantsearch:
+  name: instantsearch.js
+  file: dist/instantsearch.production.min.js
+  version: 4.66.1
 katex:
  name: katex
  file: dist/katex.min.css
@@ -70,98 +118,49 @@ katex_copytex:
  file: dist/contrib/copy-tex.min.js
  other_name: KaTeX
  version: 0.16.10
-mermaid:
-  name: mermaid
-  file: dist/mermaid.min.js
-  version: 10.9.0
-canvas_ribbon:
-  name: butterfly-extsrc
-  file: dist/canvas-ribbon.min.js
-  version: 1.1.3
-canvas_fluttering_ribbon:
-  name: butterfly-extsrc
-  file: dist/canvas-fluttering-ribbon.min.js
-  version: 1.1.3
-canvas_nest:
-  name: butterfly-extsrc
-  file: dist/canvas-nest.min.js
-  version: 1.1.3
-activate_power_mode:
-  name: butterfly-extsrc
-  file: dist/activate-power-mode.min.js
-  version: 1.1.3
-fireworks:
-  name: butterfly-extsrc
-  file: dist/fireworks.min.js
-  version: 1.1.3
-click_heart:
-  name: butterfly-extsrc
-  file: dist/click-heart.min.js
-  version: 1.1.3
-clickShowText:
-  name: butterfly-extsrc
-  file: dist/click-show-text.min.js
-  version: 1.1.3
 lazyload:
  name: vanilla-lazyload
  file: dist/lazyload.iife.min.js
  version: 19.0.5
-instantpage:
-  name: instant.page
-  file: instantpage.js
-  version: 5.2.0
-typed:
-  name: typed.js
-  file: dist/typed.umd.js
-  version: 2.1.0
-pangu:
-  name: pangu
-  file: dist/browser/pangu.min.js
-  version: 4.0.7
-fancybox_css:
-  name: '@fancyapps/ui'
-  file: dist/fancybox/fancybox.css
-  version: 5.0.35
-  other_name: fancyapps-ui
-fancybox:
-  name: '@fancyapps/ui'
-  file: dist/fancybox/fancybox.umd.js
-  version: 5.0.35
-  other_name: fancyapps-ui
+mathjax:
+  name: mathjax
+  file: es5/tex-mml-chtml.js
+  version: 3.2.2
 medium_zoom:
  name: medium-zoom
  file: dist/medium-zoom.min.js
  version: 1.1.0
-snackbar_css:
-  name: node-snackbar
-  file: dist/snackbar.min.css
-  version: 0.1.16
-snackbar:
-  name: node-snackbar
-  file: dist/snackbar.min.js
-  version: 0.1.16
-fontawesome:
-  name: '@fortawesome/fontawesome-free'
-  file: css/all.min.css
-  other_name: font-awesome
-  version: 6.5.1
-egjs_infinitegrid:
-  name: '@egjs/infinitegrid'
-  other_name: egjs-infinitegrid
-  file: dist/infinitegrid.min.js
-  version: 4.11.1
-aplayer_css:
-  name: aplayer
-  file: dist/APlayer.min.css
-  version: 1.10.1
-aplayer_js:
-  name: aplayer
-  file: dist/APlayer.min.js
-  version: 1.10.1
+mermaid:
+  name: mermaid
+  file: dist/mermaid.min.js
+  version: 10.9.0
 meting_js:
  name: butterfly-extsrc
  file: metingjs/dist/Meting.min.js
  version: 1.1.3
+pace_default_css:
+  name: pace-js
+  other_name: pace
+  file: themes/blue/pace-theme-minimal.css
+  version: 1.2.4
+pace_js:
+  name: pace-js
+  other_name: pace
+  file: pace.min.js
+  version: 1.2.4
+pangu:
+  name: pangu
+  file: dist/browser/pangu.min.js
+  version: 4.0.7
+pjax:
+  name: pjax
+  file: pjax.min.js
+  version: 0.2.8
+prismjs_autoloader:
+  name: prismjs
+  file: plugins/autoloader/prism-autoloader.min.js
+  other_name: prism
+  version: 1.29.0
 prismjs_js:
  name: prismjs
  file: prism.js
@@ -172,40 +171,41 @@ prismjs_lineNumber_js:
  file: plugins/line-numbers/prism-line-numbers.min.js
  other_name: prism
  version: 1.29.0
-prismjs_autoloader:
-  name: prismjs
-  file: plugins/autoloader/prism-autoloader.min.js
-  other_name: prism
-  version: 1.29.0
-artalk_js:
-  name: artalk
-  file: dist/Artalk.js
-  version: 2.8.3
-artalk_css:
-  name: artalk
-  file: dist/Artalk.css
-  version: 2.8.3
-pace_js:
-  name: pace-js
-  other_name: pace
-  file: pace.min.js
-  version: 1.2.4
-pace_default_css:
-  name: pace-js
-  other_name: pace
-  file: themes/blue/pace-theme-minimal.css
-  version: 1.2.4
-docsearch_js:
-  name: '@docsearch/js'
-  other_name: docsearch-js
-  file: dist/umd/index.js
-  version: 3.6.0
-docsearch_css:
-  name: '@docsearch/css'
-  other_name: docsearch-css
-  file: dist/style.css
-  version: 3.6.0
-abcjs_basic_js:
-  name: abcjs
-  file: dist/abcjs-basic-min.js
-  version: 6.3.0
+sharejs:
+  name: butterfly-extsrc
+  file: sharejs/dist/js/social-share.min.js
+  version: 1.1.3
+sharejs_css:
+  name: butterfly-extsrc
+  file: sharejs/dist/css/share.min.css
+  version: 1.1.3
+snackbar:
+  name: node-snackbar
+  file: dist/snackbar.min.js
+  version: 0.1.16
+snackbar_css:
+  name: node-snackbar
+  file: dist/snackbar.min.css
+  version: 0.1.16
+twikoo:
+  name: twikoo
+  file: dist/twikoo.all.min.js
+  version: 1.6.32
+typed:
+  name: typed.js
+  file: dist/typed.umd.js
+  version: 2.1.0
+valine:
+  name: valine
+  file: dist/Valine.min.js
+  version: 1.5.1
+waline_css:
+  name: '@waline/client'
+  file: dist/waline.css
+  other_name: waline
+  version: 3.1.3
+waline_js:
+  name: '@waline/client'
+  file: dist/waline.js
+  other_name: waline
+  version: 3.1.3
--- a/scripts/events/merge_config.js
+++ b/scripts/events/merge_config.js
@@ -487,6 +487,7 @@ hexo.extend.filter.register('before_generate', () => {
    },
    mermaid: {
      enable: false,
+      code_write: false,
      theme: {
        light: 'default',
        dark: 'dark'
--- a/source/css/_layout/third-party.styl
+++ b/source/css/_layout/third-party.styl
@@ -58,12 +58,17 @@ if hexo-config('waline.bg')
 .medium-zoom-overlay
  z-index: 99999 !important

-.mermaid-wrap
-  margin: 0 0 20px
-  text-align: center
+if hexo-config('mermaid.enable')
+  .mermaid-wrap
+    margin: 0 0 20px
+    text-align: center

-  & > svg
-    height: 100%
+    & > svg
+      height: 100%
+
+  if hexo-config('mermaid.code_write')
+    pre > code.mermaid
+      display: none

 .utterances,
 .fb-comments iframe