Fix mermaid folding

next-theme · May 8, 2024 · 6742735 · 6742735
1 parent 524c369
commit 6742735
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 18 deletions.
diff --git a/scripts/events/lib/highlight.js b/scripts/events/lib/highlight.js
@@ -13,7 +13,6 @@ module.exports = hexo => {
   const { config } = hexo;
   const theme = hexo.theme.config;
   config.highlight.hljs = false;
-  config.prismjs = config.prismjs || {};
   theme.highlight = {
     enable: config.syntax_highlighter === 'highlight.js' || config.highlight.enable,
     light : highlightTheme(theme.codeblock.theme.light),

diff --git a/scripts/helpers/next-config.js b/scripts/helpers/next-config.js
@@ -18,6 +18,7 @@ hexo.extend.helper.register('next_config', function() {
     version   : this.next_version,
     exturl    : theme.exturl,
     sidebar   : theme.sidebar,
+    hljswrap  : theme.highlight.enable && config.highlight.wrap,
     copycode  : theme.codeblock.copy_button,
     fold      : theme.codeblock.fold,
     bookmark  : theme.bookmark,

diff --git a/scripts/tags/mermaid.js b/scripts/tags/mermaid.js
@@ -7,8 +7,13 @@
 const { escapeHTML } = require('hexo-util');
 
 module.exports = function(args, content) {
-  return `<pre class="mermaid">
+  // Support mermaid inside backtick code block
+  // Keep the same HTML structure
+  // Fix issue #347 #797
+  return `<pre>
+<code class="mermaid">
 ${args.join(' ')}
 ${escapeHTML(content)}
+</code>
 </pre>`;
 };
diff --git a/source/js/third-party/tags/mermaid.js b/source/js/third-party/tags/mermaid.js
@@ -1,7 +1,7 @@
 /* global NexT, CONFIG, mermaid */
 
 document.addEventListener('page:loaded', () => {
-  const mermaidElements = document.querySelectorAll('.mermaid');
+  const mermaidElements = document.querySelectorAll('pre > .mermaid');
   if (mermaidElements.length) {
     NexT.utils.getScript(CONFIG.mermaid.js, {
       condition: window.mermaid
@@ -11,13 +11,7 @@ document.addEventListener('page:loaded', () => {
         newElement.innerHTML = element.innerHTML;
         newElement.className = element.className;
         const parent = element.parentNode;
-        // Fix issue #347
-        // Support mermaid inside backtick code block
-        if (parent.matches('pre')) {
-          parent.parentNode.replaceChild(newElement, parent);
-        } else {
-          parent.replaceChild(newElement, element);
-        }
+        parent.parentNode.replaceChild(newElement, parent);
       });
       mermaid.initialize({
         theme    : CONFIG.darkmode && window.matchMedia('(prefers-color-scheme: dark)').matches ? CONFIG.mermaid.theme.dark : CONFIG.mermaid.theme.light,

diff --git a/source/js/utils.js b/source/js/utils.js
@@ -41,11 +41,11 @@ NexT.utils = {
 
   registerCodeblock(element) {
     const inited = !!element;
-    let figure = (inited ? element : document).querySelectorAll('figure.highlight');
-    let isHljsWithWrap = true;
-    if (figure.length === 0) {
-      figure = document.querySelectorAll('pre:not(.mermaid)');
-      isHljsWithWrap = false;
+    let figure;
+    if (CONFIG.hljswrap) {
+      figure = (inited ? element : document).querySelectorAll('figure.highlight');
+    } else {
+      figure = document.querySelectorAll('pre');
     }
     figure.forEach(element => {
       if (!inited) {
@@ -61,10 +61,12 @@ NexT.utils = {
         });
       }
       const height = parseInt(window.getComputedStyle(element).height.replace('px', ''), 10);
-      const needFold = CONFIG.fold.enable && (height > CONFIG.fold.height);
+      // Skip pre > .mermaid for folding but keep the copy button
+      // Note that it only works before mermaid.js loaded (race condition)
+      const needFold = CONFIG.fold.enable && (height > CONFIG.fold.height) && !element.querySelector('.mermaid');
       if (!needFold && !CONFIG.copycode.enable) return;
       let target;
-      if (isHljsWithWrap && CONFIG.copycode.style === 'mac') {
+      if (CONFIG.hljswrap && CONFIG.copycode.style === 'mac') {
         target = element;
       } else {
         let box = element.querySelector('.code-container');

diff --git a/test/tags/mermaid.js b/test/tags/mermaid.js
@@ -13,9 +13,11 @@ describe('mermaid', () => {
   const mermaid = require('../../scripts/tags/mermaid');
 
   it('default', () => {
-    mermaid(['graph', 'TD'], result).should.eql(`<pre class="mermaid">
+    mermaid(['graph', 'TD'], result).should.eql(`<pre>
+<code class="mermaid">
 graph TD
 ${escapeHTML(result)}
+</code>
 </pre>`);
   });
 });