提交代码优化相关

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'
+import PrismMac from '@/components/PrismMac'
-const PrismMac = dynamic(() => import('@/components/PrismMac'), {
+// const PrismMac = dynamic(() => import('@/components/PrismMac'), {
-  ssr: false
+//   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')
+    // addWatch4Dom()
-    const existPreMac = container?.getElementsByClassName('pre-mac')
+    renderPrismMac()
-    const existCodeToolbar = container?.getElementsByClassName('code-toolbar')
+    router.events.on('routeChangeComplete', renderPrismMac)
-    const existCodeCopy = container?.getElementsByClassName('notion-code-copy')
+    return () => {
-    Array.from(existCodeCopy).forEach(item => item.remove())
+      router.events.off('routeChangeComplete', renderPrismMac)
-    // 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()
   }, [])
   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(`The ${mutation.attributeName} attribute was modified.`)
-          console.log(mutation.attributeName)
+        //   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

styles/notion.css

@@ -1835,6 +1835,7 @@ pre[class*='language-'] {
   line-height: 120%;
   min-width: 0;
   font-size: 14px;
+  @apply dark:text-gray-200
 }
 
 .notion-collection-column-title-icon {
@@ -1845,6 +1846,8 @@ pre[class*='language-'] {
   min-height: 14px;
   fill: var(--fg-color-2);
   margin-right: 6px;
+  @apply dark:text-gray-200
+
 }
 
 .notion-collection-column-title-body {

styles/prism-mac-style.css

@@ -3,14 +3,8 @@
  **/
 .code-toolbar {
   position: relative;
-
+  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4);
-  width: 100%;
+  @apply mb-8 pt-6 w-full rounded-lg bg-black
-
-  background: #000;
-
-  padding-top: 20px;
-
-  border-radius: 0.75rem;
 }
 
 .toolbar {
@@ -34,17 +28,11 @@
 
 pre[class*='language-'].line-numbers {
   position: relative;
-
   padding: 3px; /*修改*/
-
   padding-left: 3.8em;
-
   counter-reset: linenumber;
-
   max-height: 400px; /*修改*/
-
   background: black;
-
   border: none;
 }
 
@@ -54,29 +42,15 @@ pre[class*='language-'] {
 }
 
 .pre-mac {
-  position: relative;
+    position: absolute;
-
+    left: 15px;
-  margin-top: -7px;
+    @apply z-10 top-4 left-3
-
-  top: 21px;
-
-  left: 10px;
-
-  width: 100px;
-
-  z-index: 99;
 }
 
 .pre-mac > span {
-  float: left;
-
-  width: 10px;
-
-  height: 10px;
-
   border-radius: 50%;
-
   margin-right: 5px;
+  @apply float-left
 }
 
 .pre-mac > span:nth-child(1) {
@@ -91,17 +65,6 @@ pre[class*='language-'] {
   background: limegreen;
 }
 
-/* 引用块中的代码样式调 */
+.notion-code-copy{
-blockquote  .code-toolbar {
+  display: none;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  margin-top: 5px;
-}
-
-blockquote .pre-mac {
-  top: 15px;
-}
-
-details .code-toolbar {
-  top: 10px;
 }