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

_config.yml

@@ -811,11 +811,13 @@ abcjs:
   enable: false
   per_page: true
 
-# mermaid
+# Mermaid
-# see https://github.com/mermaid-js/mermaid
+# See https://github.com/mermaid-js/mermaid
 mermaid:
-  enable: false
+  enable: true
-  # built-in themes: default/forest/dark/neutral
+  # 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": {

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:
+aplayer_css:
-  name: instantsearch.js
+  name: aplayer
-  file: dist/instantsearch.production.min.js
+  file: dist/APlayer.min.css
-  version: 4.66.1
+  version: 1.10.1
-pjax:
+aplayer_js:
-  name: pjax
+  name: aplayer
-  file: pjax.min.js
+  file: dist/APlayer.min.js
-  version: 0.2.8
+  version: 1.10.1
-gitalk:
+artalk_css:
-  name: gitalk
+  name: artalk
-  file: dist/gitalk.min.js
+  file: dist/Artalk.css
-  version: 1.8.0
+  version: 2.8.3
-gitalk_css:
+artalk_js:
-  name: gitalk
+  name: artalk
-  file: dist/gitalk.css
+  file: dist/Artalk.js
-  version: 1.8.0
+  version: 2.8.3
 blueimp_md5:
   name: blueimp-md5
   file: js/md5.min.js
   version: 2.19.0
-valine:
+canvas_fluttering_ribbon:
-  name: valine
+  name: butterfly-extsrc
-  file: dist/Valine.min.js
+  file: dist/canvas-fluttering-ribbon.min.js
-  version: 1.5.1
+  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:
+docsearch_css:
-  name: twikoo
+  name: '@docsearch/css'
-  file: dist/twikoo.all.min.js
+  other_name: docsearch-css
-  version: 1.6.32
+  file: dist/style.css
-waline_js:
+  version: 3.6.0
-  name: '@waline/client'
+docsearch_js:
-  file: dist/waline.js
+  name: '@docsearch/js'
-  other_name: waline
+  other_name: docsearch-js
-  version: 3.1.3
+  file: dist/umd/index.js
-waline_css:
+  version: 3.6.0
-  name: '@waline/client'
+egjs_infinitegrid:
-  file: dist/waline.css
+  name: '@egjs/infinitegrid'
-  other_name: waline
+  other_name: egjs-infinitegrid
-  version: 3.1.3
+  file: dist/infinitegrid.min.js
-sharejs:
+  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:
+fontawesome:
-  name: butterfly-extsrc
+  name: '@fortawesome/fontawesome-free'
-  file: sharejs/dist/css/share.min.css
+  file: css/all.min.css
-  version: 1.1.3
+  other_name: font-awesome
-mathjax:
+  version: 6.5.1
-  name: mathjax
+gitalk:
-  file: es5/tex-mml-chtml.js
+  name: gitalk
-  version: 3.2.2
+  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:
+mathjax:
-  name: instant.page
+  name: mathjax
-  file: instantpage.js
+  file: es5/tex-mml-chtml.js
-  version: 5.2.0
+  version: 3.2.2
-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
 medium_zoom:
   name: medium-zoom
   file: dist/medium-zoom.min.js
   version: 1.1.0
-snackbar_css:
+mermaid:
-  name: node-snackbar
+  name: mermaid
-  file: dist/snackbar.min.css
+  file: dist/mermaid.min.js
-  version: 0.1.16
+  version: 10.9.0
-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
 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:
+sharejs:
-  name: prismjs
+  name: butterfly-extsrc
-  file: plugins/autoloader/prism-autoloader.min.js
+  file: sharejs/dist/js/social-share.min.js
-  other_name: prism
+  version: 1.1.3
-  version: 1.29.0
+sharejs_css:
-artalk_js:
+  name: butterfly-extsrc
-  name: artalk
+  file: sharejs/dist/css/share.min.css
-  file: dist/Artalk.js
+  version: 1.1.3
-  version: 2.8.3
+snackbar:
-artalk_css:
+  name: node-snackbar
-  name: artalk
+  file: dist/snackbar.min.js
-  file: dist/Artalk.css
+  version: 0.1.16
-  version: 2.8.3
+snackbar_css:
-pace_js:
+  name: node-snackbar
-  name: pace-js
+  file: dist/snackbar.min.css
-  other_name: pace
+  version: 0.1.16
-  file: pace.min.js
+twikoo:
-  version: 1.2.4
+  name: twikoo
-pace_default_css:
+  file: dist/twikoo.all.min.js
-  name: pace-js
+  version: 1.6.32
-  other_name: pace
+typed:
-  file: themes/blue/pace-theme-minimal.css
+  name: typed.js
-  version: 1.2.4
+  file: dist/typed.umd.js
-docsearch_js:
+  version: 2.1.0
-  name: '@docsearch/js'
+valine:
-  other_name: docsearch-js
+  name: valine
-  file: dist/umd/index.js
+  file: dist/Valine.min.js
-  version: 3.6.0
+  version: 1.5.1
-docsearch_css:
+waline_css:
-  name: '@docsearch/css'
+  name: '@waline/client'
-  other_name: docsearch-css
+  file: dist/waline.css
-  file: dist/style.css
+  other_name: waline
-  version: 3.6.0
+  version: 3.1.3
-abcjs_basic_js:
+waline_js:
-  name: abcjs
+  name: '@waline/client'
-  file: dist/abcjs-basic-min.js
+  file: dist/waline.js
-  version: 6.3.0
+  other_name: waline
+  version: 3.1.3

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'

source/css/_layout/third-party.styl

@@ -58,13 +58,18 @@ if hexo-config('waline.bg')
 .medium-zoom-overlay
   z-index: 99999 !important
 
-.mermaid-wrap
+if hexo-config('mermaid.enable')
+  .mermaid-wrap
     margin: 0 0 20px
     text-align: center
 
     & > svg
       height: 100%
 
+  if hexo-config('mermaid.code_write')
+    pre > code.mermaid
+      display: none
+
 .utterances,
 .fb-comments iframe
   width: 100% !important