美化代码样式

components/NotionPage.js

@@ -9,6 +9,7 @@ import Link from 'next/link'
 import { Code } from 'react-notion-x/build/third-party/code'
 import { Pdf } from 'react-notion-x/build/third-party/pdf'
 import { Equation } from 'react-notion-x/build/third-party/equation'
+
 import 'prismjs/components/prism-bash.js'
 import 'prismjs/components/prism-markup-templating.js'
 import 'prismjs/components/prism-markup.js'
@@ -41,8 +42,18 @@ import 'prismjs/components/prism-swift.js'
 import 'prismjs/components/prism-wasm.js'
 import 'prismjs/components/prism-yaml.js'
 import 'prismjs/components/prism-r.js'
+
+import 'prismjs/plugins/line-numbers/prism-line-numbers'
+import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
+
 import mermaid from 'mermaid'
 
+// https://github.com/txs
+// 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 }
 )
@@ -100,11 +111,10 @@ const NotionPage = ({ post }) => {
         }
       }
     }, 800)
-
-    addWatch4Dom()
   }, [])
 
   return <div id='container' className='max-w-5xl overflow-x-hidden mx-auto'>
+    <PrismMac />
     <NotionRenderer
       recordMap={post.blockMap}
       mapPageUrl={mapPageUrl}
@@ -120,72 +130,6 @@ const NotionPage = ({ post }) => {
   </div>
 }
 
-/**
- * 监听DOM变化
- * @param {*} element
- */
-function addWatch4Dom(element) {
-  // 选择需要观察变动的节点
-  const targetNode = element || document?.getElementById('container')
-  // 观察器的配置（需要观察什么变动）
-  const config = {
-    attributes: true,
-    childList: true,
-    subtree: true
-  }
-
-  // 当观察到变动时执行的回调函数
-  const mutationCallback = (mutations) => {
-    for (const mutation of mutations) {
-      const type = mutation.type
-      switch (type) {
-        case 'childList':
-          if (mutation.target.className === 'notion-code-copy') {
-            fixCopy(mutation.target)
-          } else if (mutation.target.className && typeof (mutation.target.className) === 'string' && mutation?.target?.className?.indexOf('language-') > -1) {
-            const copyCode = mutation.target.parentElement?.firstElementChild
-            if (copyCode) {
-              fixCopy(copyCode)
-            }
-          }
-          //   console.log('A child node has been added or removed.')
-          break
-        case 'attributes':
-        //   console.log(`The ${mutation.attributeName} attribute was modified.`)
-        //   console.log(mutation.attributeName)
-          break
-        case 'subtree':
-        //   console.log('The subtree was modified.')
-          break
-        default:
-          break
-      }
-    }
-  }
-
-  // 创建一个观察器实例并传入回调函数
-  const observer = new MutationObserver(mutationCallback)
-  //   console.log(observer)
-  // 以上述配置开始观察目标节点
-  if (targetNode) {
-    observer.observe(targetNode, config)
-  }
-
-  // observer.disconnect();
-}
-
-/**
- * 复制代码后，会重复 @see https://github.com/tangly1024/NotionNext/issues/165
- * @param {*} e
- */
-function fixCopy(codeCopy) {
-  const codeE = codeCopy.parentElement.lastElementChild
-  const codeEnd = codeE.lastChild
-  if (codeEnd.nodeName === '#text' && codeE.childNodes.length > 1) {
-    codeEnd.nodeValue = null
-  }
-}
-
 /**
  * 将id映射成博文内部链接。
  * @param {*} id

components/PrismMac.js

@@ -0,0 +1,92 @@
+import React from 'react'
+import Prism from 'prismjs'
+import 'prismjs/plugins/toolbar/prism-toolbar'
+import 'prismjs/plugins/show-language/prism-show-language'
+import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard'
+import 'prismjs/plugins/autoloader/prism-autoloader'
+
+/**
+ * @author https://github.com/txs/
+ * @returns
+ */
+const PrismMac = () => {
+  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()
+  }, [])
+  return <></>
+}
+
+/**
+ * 监听DOM变化
+ * @param {*} element
+ */
+function addWatch4Dom(element) {
+  // 选择需要观察变动的节点
+  const targetNode = element || document?.getElementById('container')
+  // 观察器的配置（需要观察什么变动）
+  const config = {
+    attributes: true,
+    childList: true,
+    subtree: true
+  }
+
+  // 当观察到变动时执行的回调函数
+  const mutationCallback = (mutations) => {
+    for (const mutation of mutations) {
+      const type = mutation.type
+      switch (type) {
+        case 'childList':
+          console.log('A child node has been added or removed.', mutation.targetNode)
+          break
+        case 'attributes':
+          console.log(`The ${mutation.attributeName} attribute was modified.`)
+          console.log(mutation.attributeName)
+          break
+        case 'subtree':
+          console.log('The subtree was modified.')
+          break
+        default:
+          break
+      }
+    }
+  }
+
+  // 创建一个观察器实例并传入回调函数
+  const observer = new MutationObserver(mutationCallback)
+  console.log('observer', observer)
+  // 以上述配置开始观察目标节点
+  if (targetNode) {
+    observer.observe(targetNode, config)
+  }
+
+  observer.disconnect()
+}
+
+export default PrismMac