美化代码样式

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

package.json

@@ -32,12 +32,13 @@
     "localStorage": "^1.0.4",
     "lodash.throttle": "^4.1.1",
     "memory-cache": "^0.2.0",
-    "mongodb": "^4.6.0",
     "mermaid": "9.2.2",
+    "mongodb": "^4.6.0",
     "next": "12.1.6",
     "notion-client": "6.15.6",
     "notion-utils": "6.15.6",
     "preact": "^10.5.15",
+    "prism-themes": "^1.9.0",
     "qrcode.react": "^1.0.1",
     "react": "17.0.2",
     "react-cookies": "^0.1.1",

pages/_app.js

@@ -8,7 +8,10 @@ import '@/styles/notion.css' //  重写部分样式
 
 // used for collection views (optional)
 // import 'rc-dropdown/assets/index.css'
-import 'prismjs/themes/prism-tomorrow.min.css'
+// import 'prismjs/themes/prism-tomorrow.min.css'
+import 'prism-themes/themes/prism-one-dark.css'
+import '@/styles/prism-mac-style.css' //  將 Prism 加入 mac 視窗樣式
+
 // import 'react-notion-x/build/third-party/equation.css'
 import 'katex/dist/katex.min.css'
 

styles/notion.css

@@ -1909,4 +1909,33 @@ pre[class*='language-'] {
 
 .notion-simple-table td {
  white-space: nowrap;
+}
+
+.pre-mac {
+  position: relative;
+  margin-top: -7px;
+  top: 21px;
+  left: 10px;
+  width: 100px;
+  z-index: 99;
+}
+
+.pre-mac > span {
+  float: left;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  margin-right: 5px;
+}
+
+.pre-mac > span:nth-child(1) {
+  background: red;
+}
+
+.pre-mac > span:nth-child(2) {
+  background: sandybrown;
+}
+
+.pre-mac > span:nth-child(3) {
+  background: limegreen;
 }

styles/prism-mac-style.css

@@ -0,0 +1,107 @@
+/**
+ * @author https://github.com/txs
+ **/
+.code-toolbar {
+  position: relative;
+
+  width: 100%;
+
+  background: #000;
+
+  padding-top: 20px;
+
+  border-radius: 0.75rem;
+}
+
+.toolbar {
+  position: absolute;
+  margin-left: 100%;
+  top: 10px;
+  right: 4px;
+  display: flex;
+  flex-direction: row;
+  font-size: 0.8rem;
+  line-height: 1rem;
+}
+
+.toolbar-item{
+  @apply whitespace-nowrap
+}
+
+.toolbar-item > button {
+  margin-top: -0.1rem;
+}
+
+pre[class*='language-'].line-numbers {
+  position: relative;
+
+  padding: 3px; /*修改*/
+
+  padding-left: 3.8em;
+
+  counter-reset: linenumber;
+
+  max-height: 400px; /*修改*/
+
+  background: black;
+
+  border: none;
+}
+
+.notion-code > code[class*='language-'],
+pre[class*='language-'] {
+  background: black;
+}
+
+.pre-mac {
+  position: relative;
+
+  margin-top: -7px;
+
+  top: 21px;
+
+  left: 10px;
+
+  width: 100px;
+
+  z-index: 99;
+}
+
+.pre-mac > span {
+  float: left;
+
+  width: 10px;
+
+  height: 10px;
+
+  border-radius: 50%;
+
+  margin-right: 5px;
+}
+
+.pre-mac > span:nth-child(1) {
+  background: red;
+}
+
+.pre-mac > span:nth-child(2) {
+  background: sandybrown;
+}
+
+.pre-mac > span:nth-child(3) {
+  background: limegreen;
+}
+
+/* 引用块中的代码样式调 */
+blockquote  .code-toolbar {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  margin-top: 5px;
+}
+
+blockquote .pre-mac {
+  top: 15px;
+}
+
+details .code-toolbar {
+  top: 10px;
+}