提交代码优化相关

components/NotionPage.js

@@ -45,16 +45,14 @@ import 'prismjs/components/prism-r.js'
 import 'prismjs/plugins/line-numbers/prism-line-numbers'
 import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
 
-// mermaid图
-import mermaid from 'mermaid'
 // 化学方程式
 import '@/lib/mhchem'
 
 // https://github.com/txs
-// import PrismMac from '@/components/PrismMac'
-const PrismMac = dynamic(() => import('@/components/PrismMac'), {
-  ssr: false
-})
+import PrismMac from '@/components/PrismMac'
+// const PrismMac = dynamic(() => import('@/components/PrismMac'), {
+//   ssr: false
+// })
 
 const Collection = dynamic(() =>
   import('react-notion-x/build/third-party/collection').then((m) => m.Collection), { ssr: true }
@@ -79,14 +77,6 @@ const NotionPage = ({ post }) => {
   const zoomRef = React.useRef(zoom ? zoom.clone() : null)
 
   React.useEffect(() => {
-    // 支持 Mermaid
-    const mermaids = document.querySelectorAll('.notion-code .language-mermaid')
-    for (const e of mermaids) {
-      const chart = e.innerText
-      e.parentElement.parentElement.innerHTML = `<div class="mermaid">${chart}</div>`
-      mermaid.contentLoaded()
-    }
-
     setTimeout(() => {
       if (window.location.hash) {
         const tocNode = document.getElementById(window.location.hash.substring(1))
@@ -115,7 +105,7 @@ const NotionPage = ({ post }) => {
     }, 800)
   }, [])
 
-  return <div id='container' className='max-w-5xl overflow-x-hidden mx-auto'>
+  return <div id='container' className='max-w-5xl overflow-x-visible mx-auto'>
     <PrismMac />
     <NotionRenderer
       recordMap={post.blockMap}

components/PrismMac.js

@@ -5,48 +5,73 @@ import 'prismjs/plugins/show-language/prism-show-language'
 import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard'
 import 'prismjs/plugins/autoloader/prism-autoloader'
 
+// mermaid图
+import mermaid from 'mermaid'
+import { useRouter } from 'next/router'
+
 /**
  * @author https://github.com/txs/
  * @returns
  */
 const PrismMac = () => {
+  const router = useRouter()
   React.useEffect(() => {
-    const container = document?.getElementById('notion-article')
-    const existPreMac = container?.getElementsByClassName('pre-mac')
-    const existCodeToolbar = container?.getElementsByClassName('code-toolbar')
-    const existCodeCopy = container?.getElementsByClassName('notion-code-copy')
-    Array.from(existCodeCopy).forEach(item => item.remove())
-    // Remove existCodeToolbar and existPreMac
-    Array.from(existPreMac).forEach(item => item.remove())
-    Array.from(existCodeToolbar).forEach(item => item.remove())
-    const codeBlocks = container?.getElementsByTagName('pre')
-    Array.from(codeBlocks).forEach(item => {
-      // Add line numbers
-      item.classList.add('line-numbers')
-      // item.classList.add('show-language')
-      item.style.whiteSpace = 'pre-wrap'
-      // Add pre-mac element for Mac Style UI
-      if (existPreMac.length <= codeBlocks.length) {
-        const preMac = document.createElement('div')
-        preMac.classList.add('pre-mac')
-        preMac.innerHTML = '<span></span><span></span><span></span>'
-        item?.parentElement?.insertBefore(preMac, item)
-      }
-    })
-
-    console.log('测试', container?.getElementsByClassName('pre-mac'))
-
-    addWatch4Dom()
-
-    Prism.highlightAll()
+    // addWatch4Dom()
+    renderPrismMac()
+    router.events.on('routeChangeComplete', renderPrismMac)
+    return () => {
+      router.events.off('routeChangeComplete', renderPrismMac)
+    }
   }, [])
   return <></>
 }
 
+function renderPrismMac() {
+  const container = document?.getElementById('container-inner')
+
+  const codeBlocks = container?.getElementsByTagName('pre')
+  Array.from(codeBlocks).forEach(item => {
+    // Add line numbers
+    if (!item.classList.contains('line-numbers')) {
+      item.classList.add('line-numbers')
+      item.style.whiteSpace = 'pre-wrap'
+    }
+  })
+
+  const codeToolBars = container?.getElementsByClassName('code-toolbar')
+
+  Array.from(codeToolBars).forEach(item => {
+    // Add pre-mac element for Mac Style UI
+    const findPreMac = item.getElementsByClassName('pre-mac')
+    if (findPreMac.length === 0) {
+      const preMac = document.createElement('div')
+      preMac.classList.add('pre-mac')
+      preMac.innerHTML = '<span></span><span></span><span></span>'
+      item?.appendChild(preMac, item)
+    }
+  })
+
+  // 支持 Mermaid
+  const mermaids = document.querySelectorAll('.notion-code .language-mermaid')
+  for (const e of mermaids) {
+    const chart = e.innerText
+    e.parentElement.parentElement.classList.remove('code-toolbar')
+    e.parentElement.parentElement.innerHTML = `<div class="mermaid">${chart}</div>`
+    mermaid.contentLoaded()
+  }
+
+  try {
+    Prism.highlightAll()
+  } catch (err) {
+    console.log('代码渲染', err)
+  }
+}
+
 /**
  * 监听DOM变化
  * @param {*} element
  */
+// eslint-disable-next-line no-unused-vars
 function addWatch4Dom(element) {
   // 选择需要观察变动的节点
   const targetNode = element || document?.getElementById('container')
@@ -63,14 +88,14 @@ function addWatch4Dom(element) {
       const type = mutation.type
       switch (type) {
         case 'childList':
-          console.log('A child node has been added or removed.', mutation.targetNode)
+        //   console.log('A child node has been added or removed.', mutation.target)
           break
         case 'attributes':
-          console.log(`The ${mutation.attributeName} attribute was modified.`)
-          console.log(mutation.attributeName)
+        //   console.log(`The ${mutation.attributeName} attribute was modified.`)
+        //   console.log(mutation.attributeName)
           break
         case 'subtree':
-          console.log('The subtree was modified.')
+        //   console.log('The subtree was modified.')
           break
         default:
           break
@@ -80,13 +105,13 @@ function addWatch4Dom(element) {
 
   // 创建一个观察器实例并传入回调函数
   const observer = new MutationObserver(mutationCallback)
-  console.log('observer', observer)
+  //   console.log('observer', observer)
   // 以上述配置开始观察目标节点
   if (targetNode) {
     observer.observe(targetNode, config)
   }
 
-  observer.disconnect()
+//   observer.disconnect()
 }
 
 export default PrismMac