From 34f63bfc8439ef270a31c674d7923e9348e24d8a Mon Sep 17 00:00:00 2001 From: tangly Date: Thu, 17 Nov 2022 23:15:05 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BE=8E=E5=8C=96=E4=BB=A3=E7=A0=81=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/NotionPage.js | 80 +++++---------------------- components/PrismMac.js | 92 +++++++++++++++++++++++++++++++ package.json | 3 +- pages/_app.js | 5 +- styles/notion.css | 29 ++++++++++ styles/prism-mac-style.css | 107 +++++++++++++++++++++++++++++++++++++ 6 files changed, 246 insertions(+), 70 deletions(-) create mode 100644 components/PrismMac.js create mode 100644 styles/prism-mac-style.css diff --git a/components/NotionPage.js b/components/NotionPage.js index b4529f72..d45ab909 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,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
+ {
} -/** - * 监听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 94be47a9..8a444779 100644 --- a/package.json +++ b/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", 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