Merge branch 'feature/code-beauty' into develop

# Conflicts: # components/NotionPage.js
2026-05-14 07:26:52 +00:00 · 2022-11-17 23:26:58 +08:00
parent bd8043c309 34f63bfc84
commit 897eade926
6 changed files with 244 additions and 85 deletions
--- a/components/NotionPage.js
+++ b/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,11 +42,20 @@ 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'
+
 // 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
+})
+
 const Collection = dynamic(() =>
  import('react-notion-x/build/third-party/collection').then((m) => m.Collection), { ssr: true }
 )
@@ -69,18 +79,6 @@ const NotionPage = ({ post }) => {
  const zoomRef = React.useRef(zoom ? zoom.clone() : null)

  React.useEffect(() => {
-    // 准备接入化学方程式
-    // console.log('kk', katex)
-    // const html = katex.renderToString('\\ce{CO2 + C -> 2 C0}')
-    // console.log(html)
-    // katex.__parse('\\ce{CO2 + C -> 2 CO}')
-    // katex.render('\ce{2H2O->2H2 + O2}', document.getElementById('test1'))
-    // katex.render('(\ce{2H + O -> H2O}\)', document.getElementById('test2'))
-    // katex.render('\\ce{2H2O->2H2 + O2}', document.getElementById('test3'))
-
-    // document.getElementById('test').innerHTML = katex.renderToString('\ce{2H2O->2H2 + O2}')
-    // document.getElementById('test').innerHTML = katex.renderToString('\(\ce{2H + O -> H2O}\)')
-
    // 支持 Mermaid
    const mermaids = document.querySelectorAll('.notion-code .language-mermaid')
    for (const e of mermaids) {
@@ -115,15 +113,10 @@ const NotionPage = ({ post }) => {
        }
      }
    }, 800)
-
-    addWatch4Dom()
  }, [])

  return <div id='container' className='max-w-5xl overflow-x-hidden mx-auto'>
-    <script async src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/mhchem.min.js" integrity="sha384-5gCAXJ0ZgozlShOzzT0OWArn7yCPGWVIvgo+BAd8NUKbCmulrJiQuCVR9cHlPHeG"></script>
-    <div id='test1'></div>
-    <div id='test2'></div>
-    <div id='test2'></div>
+    <PrismMac />
    <NotionRenderer
      recordMap={post.blockMap}
      mapPageUrl={mapPageUrl}
@@ -139,72 +132,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
--- a/components/PrismMac.js
+++ b/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
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
    "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",
--- a/pages/_app.js
+++ b/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'

--- a/styles/notion.css
+++ b/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;
 }
--- a/styles/prism-mac-style.css
+++ b/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;
+}