mermaid 样式调整

components/PrismMac.js

@@ -9,17 +9,15 @@ import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
 
 // mermaid图
 import mermaid from 'mermaid'
-import { useGlobal } from '@/lib/global'
 
 /**
  * @author https://github.com/txs/
  * @returns
  */
 const PrismMac = () => {
-  const { theme } = useGlobal()
   React.useEffect(() => {
     renderPrismMac()
-  }, [theme])
+  }, [])
   return <></>
 }
 
@@ -27,14 +25,6 @@ function renderPrismMac() {
   const container = document?.getElementById('container-inner')
   const codeToolBars = container?.getElementsByClassName('code-toolbar')
 
-  if (codeToolBars) {
-    Array.from(codeToolBars).forEach(item => {
-      const codeBlocks = item.getElementsByTagName('pre')
-      if (codeBlocks.length === 0) {
-        item.remove()
-      }
-    })
-  }
   // Add line numbers
   const codeBlocks = container?.getElementsByTagName('pre')
   if (codeBlocks) {
@@ -47,36 +37,31 @@ function renderPrismMac() {
   }
 
   //   支持 Mermaid
-  const mermaids = document.querySelectorAll('.notion-code .language-mermaid')
-  console.log('检查 mermaids', mermaids)
-  if (mermaids) {
-    for (const e of mermaids) {
-      const chart = e.firstChild.textContent
-      if (e.firstElementChild) {
-        e.parentElement.remove()
-        continue
+  const mermaidPres = document.querySelectorAll('pre.notion-code.language-mermaid')
+  if (mermaidPres) {
+    for (const e of mermaidPres) {
+      const chart = e.querySelector('code').textContent
+      console.log(e.parentElement)
+      if (chart && !e.querySelector('.mermaid')) {
+        const m = document.createElement('div')
+        m.className = 'mermaid'
+        m.innerHTML = chart
+        e.appendChild(m)
       }
-      if (chart) {
-        e.parentElement.innerHTML = `<div class="mermaid">${chart}</div>`
-      }
-    }
-  }
-
-  // mermaid 样式
-  const mermaidsCodeBar = document.querySelectorAll('.language-mermaid')
-  if (mermaidsCodeBar) {
-    for (const e of mermaidsCodeBar) {
-      e.parentElement.classList.replace('code-toolbar', 'w-full')
     }
   }
 
   const mermaidsSvg = document.querySelectorAll('.mermaid')
   if (mermaidsSvg) {
+    let needLoad = false
     for (const e of mermaidsSvg) {
       if (e?.firstChild?.nodeName !== 'svg') {
-        mermaid.contentLoaded()
+        needLoad = true
       }
     }
+    if (needLoad) {
+      mermaid.contentLoaded()
+    }
   }
 
   // 重新渲染之前检查所有的多余text

components/WalineComponent.js

@@ -15,7 +15,7 @@ const WalineComponent = (props) => {
   const router = useRouter()
 
   const updateWaline = url => {
-    if (url !== path) {
+    if (url !== path && waline) {
       waline.update(props)
     }
   }

styles/prism-mac-style.css

@@ -60,6 +60,10 @@ pre[class*='language-'] {
 }
 
 pre[class*="language-mermaid"] {
-  background: transparent !important; 
-  @apply dark:bg-gray-200 !important;
+  @apply bg-gray-50 dark:bg-gray-200 !important;
+}
+
+/* mermaid 原文隐藏 */
+code.language-mermaid {
+  display:none
 }