diff --git a/components/PrismMac.js b/components/PrismMac.js index f6e82542..0180069a 100644 --- a/components/PrismMac.js +++ b/components/PrismMac.js @@ -9,17 +9,15 @@ import 'prismjs/plugins/line-numbers/prism-line-numbers.css' // mermaid图 import mermaid from 'mermaid' -import { useGlobal } from '@/lib/global' /** * @author https://github.com/txs/ * @returns */ const PrismMac = () => { - const { theme } = useGlobal() React.useEffect(() => { renderPrismMac() - }, [theme]) + }, []) return <> } @@ -27,14 +25,6 @@ function renderPrismMac() { const container = document?.getElementById('container-inner') const codeToolBars = container?.getElementsByClassName('code-toolbar') - if (codeToolBars) { - Array.from(codeToolBars).forEach(item => { - const codeBlocks = item.getElementsByTagName('pre') - if (codeBlocks.length === 0) { - item.remove() - } - }) - } // Add line numbers const codeBlocks = container?.getElementsByTagName('pre') if (codeBlocks) { @@ -47,36 +37,31 @@ function renderPrismMac() { } // 支持 Mermaid - const mermaids = document.querySelectorAll('.notion-code .language-mermaid') - console.log('检查 mermaids', mermaids) - if (mermaids) { - for (const e of mermaids) { - const chart = e.firstChild.textContent - if (e.firstElementChild) { - e.parentElement.remove() - continue + const mermaidPres = document.querySelectorAll('pre.notion-code.language-mermaid') + if (mermaidPres) { + for (const e of mermaidPres) { + const chart = e.querySelector('code').textContent + console.log(e.parentElement) + if (chart && !e.querySelector('.mermaid')) { + const m = document.createElement('div') + m.className = 'mermaid' + m.innerHTML = chart + e.appendChild(m) } - if (chart) { - e.parentElement.innerHTML = `
${chart}
` - } - } - } - - // mermaid 样式 - const mermaidsCodeBar = document.querySelectorAll('.language-mermaid') - if (mermaidsCodeBar) { - for (const e of mermaidsCodeBar) { - e.parentElement.classList.replace('code-toolbar', 'w-full') } } const mermaidsSvg = document.querySelectorAll('.mermaid') if (mermaidsSvg) { + let needLoad = false for (const e of mermaidsSvg) { if (e?.firstChild?.nodeName !== 'svg') { - mermaid.contentLoaded() + needLoad = true } } + if (needLoad) { + mermaid.contentLoaded() + } } // 重新渲染之前检查所有的多余text diff --git a/components/WalineComponent.js b/components/WalineComponent.js index a47999c7..00ee3242 100644 --- a/components/WalineComponent.js +++ b/components/WalineComponent.js @@ -15,7 +15,7 @@ const WalineComponent = (props) => { const router = useRouter() const updateWaline = url => { - if (url !== path) { + if (url !== path && waline) { waline.update(props) } } diff --git a/styles/prism-mac-style.css b/styles/prism-mac-style.css index 73fbe296..572fa764 100644 --- a/styles/prism-mac-style.css +++ b/styles/prism-mac-style.css @@ -60,6 +60,10 @@ pre[class*='language-'] { } pre[class*="language-mermaid"] { - background: transparent !important; - @apply dark:bg-gray-200 !important; + @apply bg-gray-50 dark:bg-gray-200 !important; +} + +/* mermaid 原文隐藏 */ +code.language-mermaid { + display:none } \ No newline at end of file