mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-13 23:16:47 +00:00
108 lines
3.0 KiB
JavaScript
108 lines
3.0 KiB
JavaScript
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'
|
|
import 'prismjs/plugins/line-numbers/prism-line-numbers'
|
|
import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
|
|
|
|
// mermaid图
|
|
import mermaid from 'mermaid'
|
|
import { useGlobal } from '@/lib/global'
|
|
import { useRouter } from 'next/router'
|
|
|
|
/**
|
|
* @author https://github.com/txs/
|
|
* @returns
|
|
*/
|
|
const PrismMac = () => {
|
|
const router = useRouter()
|
|
const { isDarkMode } = useGlobal()
|
|
const scrollTop = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop
|
|
|
|
React.useEffect(() => {
|
|
renderPrismMac()
|
|
window.scrollTo(0, scrollTop)
|
|
router.events.on('routeChangeComplete', renderPrismMac)
|
|
return () => {
|
|
router.events.off('routeChangeComplete', renderPrismMac)
|
|
}
|
|
}, [isDarkMode])
|
|
return <></>
|
|
}
|
|
|
|
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) {
|
|
Array.from(codeBlocks).forEach(item => {
|
|
if (!item.classList.contains('line-numbers')) {
|
|
item.classList.add('line-numbers')
|
|
item.style.whiteSpace = 'pre-wrap'
|
|
}
|
|
})
|
|
}
|
|
|
|
setTimeout(() => {
|
|
// Add pre-mac element for Mac Style UI
|
|
if (codeToolBars) {
|
|
Array.from(codeToolBars).forEach(item => {
|
|
const existPreMac = item.getElementsByClassName('pre-mac')
|
|
if (existPreMac.length < codeToolBars.length) {
|
|
const preMac = document.createElement('div')
|
|
preMac.classList.add('pre-mac')
|
|
preMac.innerHTML = '<span></span><span></span><span></span>'
|
|
item?.appendChild(preMac, item)
|
|
}
|
|
})
|
|
}
|
|
}, 10)
|
|
|
|
// 重新渲染之前检查所有的多余text
|
|
|
|
try {
|
|
Prism.highlightAll()
|
|
} catch (err) {
|
|
console.log('代码渲染', err)
|
|
}
|
|
|
|
// 支持 Mermaid
|
|
const mermaids = document.querySelectorAll('.notion-code .language-mermaid')
|
|
if (mermaids) {
|
|
for (const e of mermaids) {
|
|
e.parentElement.parentElement.classList.remove('code-toolbar')
|
|
const chart = e.firstChild.textContent
|
|
if (e.firstElementChild) {
|
|
e.parentElement.parentElement.remove()
|
|
continue
|
|
}
|
|
if (chart) {
|
|
e.parentElement.parentElement.innerHTML = `<div class="mermaid">${chart}</div>`
|
|
}
|
|
}
|
|
}
|
|
|
|
const mermaidsSvg = document.querySelectorAll('.mermaid')
|
|
if (mermaidsSvg) {
|
|
for (const e of mermaidsSvg) {
|
|
if (e?.firstChild?.nodeName !== 'svg') {
|
|
mermaid.contentLoaded()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
export default PrismMac
|