diff --git a/components/NotionPage.js b/components/NotionPage.js
index d2235bb7..d7e32d7c 100644
--- a/components/NotionPage.js
+++ b/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 = `${chart}
`
- 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
+ return
{
+ 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 = ''
- 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 = ''
+ 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 = `${chart}
`
+ 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
diff --git a/styles/notion.css b/styles/notion.css
index 40c4912e..b717e39a 100644
--- a/styles/notion.css
+++ b/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 {
diff --git a/styles/prism-mac-style.css b/styles/prism-mac-style.css
index 5cd650d9..98a9c4c1 100644
--- a/styles/prism-mac-style.css
+++ b/styles/prism-mac-style.css
@@ -3,14 +3,8 @@
**/
.code-toolbar {
position: relative;
-
- width: 100%;
-
- background: #000;
-
- padding-top: 20px;
-
- border-radius: 0.75rem;
+ box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4);
+ @apply mb-8 pt-6 w-full rounded-lg bg-black
}
.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;
-
- margin-top: -7px;
-
- top: 21px;
-
- left: 10px;
-
- width: 100px;
-
- z-index: 99;
+ position: absolute;
+ left: 15px;
+ @apply z-10 top-4 left-3
}
.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;
}
-/* 引用块中的代码样式调 */
-blockquote .code-toolbar {
- padding-top: 10px;
- padding-bottom: 10px;
- margin-top: 5px;
-}
-
-blockquote .pre-mac {
- top: 15px;
-}
-
-details .code-toolbar {
- top: 10px;
+.notion-code-copy{
+ display: none;
}
\ No newline at end of file