diff --git a/components/PrismMac.js b/components/PrismMac.js index 4bd16caa..88575f30 100644 --- a/components/PrismMac.js +++ b/components/PrismMac.js @@ -18,6 +18,10 @@ import { isBrowser, loadExternalResource } from '@/lib/utils' */ const PrismMac = () => { if (isBrowser()) { + // setup autoloader + if (Prism && Prism.plugins && Prism.plugins.autoloader) { + Prism.plugins.autoloader.languages_path = BLOG.PRISM_JS_PATH + } loadExternalResource(BLOG.PRISM_THEME_PATH, 'css') if (BLOG.CODE_MAC_BAR) { loadExternalResource('/css/prism-mac-style.css', 'css') @@ -27,19 +31,6 @@ const PrismMac = () => { React.useEffect(() => { renderPrismMac() renderMermaid() - - // 折叠代码行号bug - const observer = new MutationObserver(mutationsList => { - for (const m of mutationsList) { - if (m.target.nodeName === 'DETAILS') { - const preCodes = m.target.querySelectorAll('pre.notion-code') - for (const preCode of preCodes) { - Prism.plugins.lineNumbers.resize(preCode) - } - } - } - }) - observer.observe(document.querySelector('#container'), { attributes: true, subtree: true }) }, []) return <> } @@ -95,8 +86,6 @@ function renderPrismMac() { // 重新渲染之前检查所有的多余text try { - // setup autoloader - Prism.plugins.autoloader.languages_path = BLOG.PRISM_JS_PATH Prism.highlightAll() } catch (err) { console.log('代码渲染', err) @@ -115,6 +104,36 @@ function renderPrismMac() { } }) } + + // 折叠代码行号bug + if (BLOG.CODE_LINE_NUMBERS === 'true') { + fixCodeLineStyle() + } +} + +/** + * 行号样式在首次渲染或被detail折叠后行高判断错误 + * 在此手动resize计算 + */ +const fixCodeLineStyle = () => { + const observer = new MutationObserver(mutationsList => { + for (const m of mutationsList) { + if (m.target.nodeName === 'DETAILS') { + const preCodes = m.target.querySelectorAll('pre.notion-code') + for (const preCode of preCodes) { + Prism.plugins.lineNumbers.resize(preCode) + } + } + } + }) + observer.observe(document.querySelector('#container'), { attributes: true, subtree: true }) + setTimeout(() => { + const preCodes = document.querySelectorAll('pre.notion-code') + for (const preCode of preCodes) { + console.log('code', preCode) + Prism.plugins.lineNumbers.resize(preCode) + } + }, 10) } export default PrismMac diff --git a/lib/utils.js b/lib/utils.js index 98fe11b3..0b997696 100644 --- a/lib/utils.js +++ b/lib/utils.js @@ -7,7 +7,6 @@ * @returns {Promise} */ export function loadExternalResource(url, type) { - console.log('加载', url, type) return new Promise((resolve, reject) => { let tag diff --git a/public/css/prism-mac-style.css b/public/css/prism-mac-style.css index 343e452a..33cdfd10 100644 --- a/public/css/prism-mac-style.css +++ b/public/css/prism-mac-style.css @@ -9,11 +9,9 @@ width: 100%; border-radius: 0.5rem; margin-bottom: 0.5rem; - /* @apply w-full rounded-lg */ } .toolbar-item{ - /* @apply whitespace-nowrap */ white-space: nowrap; } @@ -22,7 +20,6 @@ } pre[class*='language-'] { - @apply mt-0 mb-2 pt-6 !important; margin-top: 0rem !important; margin-bottom: 0rem !important; padding-top: 1.5rem !important; @@ -30,9 +27,8 @@ pre[class*='language-'] { } .pre-mac { - /* @apply left-5 top-2 z-10 absolute */ position: absolute; - left: 1.25rem; + left: 0.9rem; top: 0.5rem; z-index: 10; } @@ -43,7 +39,6 @@ pre[class*='language-'] { border-radius: 50%; margin-right: 5px; float: left; - /* @apply float-left */ } .pre-mac > span:nth-child(1) {