From 5df20e20b43b7235b1283545843e8a65d2ba78b5 Mon Sep 17 00:00:00 2001
From: anime <street-anime-olive@duck.com>
Date: Thu, 13 Feb 2025 20:50:47 +0800
Subject: [PATCH] =?UTF-8?q?fix(Mermaid):=20=E4=BF=AE=E5=A4=8D=20Mermaid=20?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87=E9=83=A8=E5=88=86=E5=86=85=E5=AE=B9=E7=BC=BA?=
 =?UTF-8?q?=E5=A4=B1=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

原因为Tailwind 引入的 .invisible 隐藏了相应的内容
---
 components/PrismMac.js | 49 ++++++++++++++++++++++++++++++++----------
 styles/notion.css      |  4 ++++
 2 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/components/PrismMac.js b/components/PrismMac.js
index 5d04fb22..7e81fc01 100644
--- a/components/PrismMac.js
+++ b/components/PrismMac.js
@@ -43,9 +43,15 @@ const PrismMac = () => {
       loadExternalResource('/css/prism-mac-style.css', 'css')
     }
     // 加载prism样式
-    loadPrismThemeCSS(isDarkMode, prismThemeSwitch, prismThemeDarkPath, prismThemeLightPath, prismThemePrefixPath)
+    loadPrismThemeCSS(
+      isDarkMode,
+      prismThemeSwitch,
+      prismThemeDarkPath,
+      prismThemeLightPath,
+      prismThemePrefixPath
+    )
     // 折叠代码
-    loadExternalResource(prismjsAutoLoader, 'js').then((url) => {
+    loadExternalResource(prismjsAutoLoader, 'js').then(url => {
       if (window?.Prism?.plugins?.autoloader) {
         window.Prism.plugins.autoloader.languages_path = prismjsPath
       }
@@ -62,7 +68,13 @@ const PrismMac = () => {
 /**
  * 加载Prism主题样式
  */
-const loadPrismThemeCSS = (isDarkMode, prismThemeSwitch, prismThemeDarkPath, prismThemeLightPath, prismThemePrefixPath) => {
+const loadPrismThemeCSS = (
+  isDarkMode,
+  prismThemeSwitch,
+  prismThemeDarkPath,
+  prismThemeLightPath,
+  prismThemePrefixPath
+) => {
   let PRISM_THEME
   let PRISM_PREVIOUS
   if (prismThemeSwitch) {
@@ -73,8 +85,14 @@ const loadPrismThemeCSS = (isDarkMode, prismThemeSwitch, prismThemeDarkPath, pri
       PRISM_THEME = prismThemeLightPath
       PRISM_PREVIOUS = prismThemeDarkPath
     }
-    const previousTheme = document.querySelector(`link[href="${PRISM_PREVIOUS}"]`)
-    if (previousTheme && previousTheme.parentNode && previousTheme.parentNode.contains(previousTheme)) {
+    const previousTheme = document.querySelector(
+      `link[href="${PRISM_PREVIOUS}"]`
+    )
+    if (
+      previousTheme &&
+      previousTheme.parentNode &&
+      previousTheme.parentNode.contains(previousTheme)
+    ) {
       previousTheme.parentNode.removeChild(previousTheme)
     }
     loadExternalResource(PRISM_THEME, 'css')
@@ -103,14 +121,17 @@ const renderCollapseCode = (codeCollapse, codeCollapseExpandDefault) => {
     const collapseWrapper = document.createElement('div')
     collapseWrapper.className = 'collapse-wrapper w-full py-2'
     const panelWrapper = document.createElement('div')
-    panelWrapper.className = 'border dark:border-gray-600 rounded-md hover:border-indigo-500 duration-200 transition-colors'
+    panelWrapper.className =
+      'border dark:border-gray-600 rounded-md hover:border-indigo-500 duration-200 transition-colors'
 
     const header = document.createElement('div')
-    header.className = 'flex justify-between items-center px-4 py-2 cursor-pointer select-none'
+    header.className =
+      'flex justify-between items-center px-4 py-2 cursor-pointer select-none'
     header.innerHTML = `<h3 class="text-lg font-medium">${language}</h3><svg class="transition-all duration-200 w-5 h-5 transform rotate-0" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M6.293 6.293a1 1 0 0 1 1.414 0L10 8.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-3 3a1 1 0 0 1-1.414 0l-3-3a1 1 0 0 1 0-1.414z" clip-rule="evenodd"/></svg>`
 
     const panel = document.createElement('div')
-    panel.className = 'invisible h-0 transition-transform duration-200 border-t border-gray-300'
+    panel.className =
+      'invisible h-0 transition-transform duration-200 border-t border-gray-300'
 
     panelWrapper.appendChild(header)
     panelWrapper.appendChild(panel)
@@ -145,7 +166,7 @@ const renderMermaid = async(mermaidCDN) => {
       if (m.target.className === 'notion-code language-mermaid') {
         const chart = m.target.querySelector('code').textContent
         if (chart && !m.target.querySelector('.mermaid')) {
-          const mermaidChart = document.createElement('div')
+          const mermaidChart = document.createElement('pre')
           mermaidChart.className = 'mermaid'
           mermaidChart.innerHTML = chart
           m.target.appendChild(mermaidChart)
@@ -172,7 +193,10 @@ const renderMermaid = async(mermaidCDN) => {
     }
   })
   if (document.querySelector('#notion-article')) {
-    observer.observe(document.querySelector('#notion-article'), { attributes: true, subtree: true })
+    observer.observe(document.querySelector('#notion-article'), {
+      attributes: true,
+      subtree: true
+    })
   }
 }
 
@@ -234,7 +258,10 @@ const fixCodeLineStyle = () => {
       }
     }
   })
-  observer.observe(document.querySelector('#notion-article'), { attributes: true, subtree: true })
+  observer.observe(document.querySelector('#notion-article'), {
+    attributes: true,
+    subtree: true
+  })
   setTimeout(() => {
     const preCodes = document.querySelectorAll('pre.notion-code')
     for (const preCode of preCodes) {
diff --git a/styles/notion.css b/styles/notion.css
index 319c37e2..7e3c0ff9 100644
--- a/styles/notion.css
+++ b/styles/notion.css
@@ -2027,6 +2027,10 @@ code.language-mermaid {
   display: none;
 }
 
+.mermaid .invisible{
+  visibility: inherit;
+}
+
 .code-toolbar {
   @apply w-full shadow-md pb-0;
 }