diff --git a/components/NotionPage.js b/components/NotionPage.js index 2b7566fb..d2235bb7 100644 --- 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
- -
-
-
+ {
} -/** - * 监听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 diff --git a/components/PrismMac.js b/components/PrismMac.js new file mode 100644 index 00000000..bd5ce5ca --- /dev/null +++ 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 = '' + 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 diff --git a/package.json b/package.json index 6039f661..8a444779 100644 --- 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", diff --git a/pages/_app.js b/pages/_app.js index 2099f722..9a3969a3 100644 --- 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' diff --git a/styles/notion.css b/styles/notion.css index f4bcd76e..40c4912e 100644 --- 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; } \ No newline at end of file diff --git a/styles/prism-mac-style.css b/styles/prism-mac-style.css new file mode 100644 index 00000000..5cd650d9 --- /dev/null +++ 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; +} \ No newline at end of file