From 55b3bcd79a5e78bfcab09b16cb1ce1bb722a0342 Mon Sep 17 00:00:00 2001 From: tangly Date: Fri, 18 Nov 2022 18:40:57 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BB=A3=E7=A0=81=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E7=9B=B8=E5=85=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/NotionPage.js | 20 ++------ components/PrismMac.js | 93 ++++++++++++++++++++++++-------------- styles/notion.css | 3 ++ styles/prism-mac-style.css | 53 ++++------------------ 4 files changed, 75 insertions(+), 94 deletions(-) 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