diff --git a/blog.config.js b/blog.config.js index 38daef7a..ce766dc0 100644 --- a/blog.config.js +++ b/blog.config.js @@ -100,15 +100,21 @@ const BLOG = { BEI_AN: process.env.NEXT_PUBLIC_BEI_AN || '', // 备案号 闽ICP备XXXXXXX + // START********代码相关******** // PrismJs 代码相关 - PRISM_JS_AUTO_LOADER: - 'https://npm.elemecdn.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js', PRISM_JS_PATH: 'https://npm.elemecdn.com/prismjs@1.29.0/components/', - PRISM_THEME_PATH: - 'https://npm.elemecdn.com/prism-themes/themes/prism-a11y-dark.min.css', // 代码样式主题 更多参考 https://github.com/PrismJS/prism-themes + PRISM_JS_AUTO_LOADER: 'https://npm.elemecdn.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js', + + // 代码主题 @see https://github.com/PrismJS/prism-themes + PRISM_THEME_PREFIX_PATH: 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-okaidia.css', // 代码块默认主题 + PRISM_THEME_SWITCH: process.env.NEXT_PUBLIC_PRISM_THEME_SWITCH || true, // 是否开启浅色/深色模式代码主题切换; 开启后将显示以下两个主题 + PRISM_THEME_LIGHT_PATH: 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-solarizedlight.css', // 浅色模式主题 + PRISM_THEME_DARK_PATH: 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-okaidia.min.css', // 深色模式主题 + CODE_MAC_BAR: process.env.NEXT_PUBLIC_CODE_MAC_BAR || true, // 代码左上角显示mac的红黄绿图标 - CODE_LINE_NUMBERS: process.env.NEXT_PUBLIC_CODE_LINE_NUMBERS || 'false', // 是否显示行号 - CODE_COLLAPSE: process.env.NEXT_PUBLIC_CODE_COLLAPSE || 'false', // 是否折叠代码框 + CODE_LINE_NUMBERS: process.env.NEXT_PUBLIC_CODE_LINE_NUMBERS || false, // 是否显示行号 + CODE_COLLAPSE: process.env.NEXT_PUBLIC_CODE_COLLAPSE || true, // 是否折叠代码框 + // END********代码相关******** // Mermaid 图表CDN MERMAID_CDN: process.env.NEXT_PUBLIC_MERMAID_CDN || 'https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.2.4/mermaid.min.js', // CDN diff --git a/components/PrismMac.js b/components/PrismMac.js index c1875225..b37ba503 100644 --- a/components/PrismMac.js +++ b/components/PrismMac.js @@ -13,6 +13,7 @@ import 'prismjs/plugins/line-numbers/prism-line-numbers.css' import BLOG from '@/blog.config' import { loadExternalResource } from '@/lib/utils' import { useRouter } from 'next/navigation' +import { useGlobal } from '@/lib/global' /** * 代码美化相关 @@ -21,24 +22,54 @@ import { useRouter } from 'next/navigation' */ const PrismMac = () => { const router = useRouter() + const { isDarkMode } = useGlobal() + useEffect(() => { if (JSON.parse(BLOG.CODE_MAC_BAR)) { loadExternalResource('/css/prism-mac-style.css', 'css') } - loadExternalResource(BLOG.PRISM_THEME_PATH, 'css') + // 加载prism样式 + loadPrismThemeCSS(isDarkMode) + // 折叠代码 loadExternalResource(BLOG.PRISM_JS_AUTO_LOADER, 'js').then((url) => { if (window?.Prism?.plugins?.autoloader) { window.Prism.plugins.autoloader.languages_path = BLOG.PRISM_JS_PATH } + renderPrismMac() renderMermaid() renderCollapseCode() }) - }, [router]) + }, [router, isDarkMode]) + return <> } /** + * 加载样式 + */ +const loadPrismThemeCSS = (isDarkMode) => { + let PRISM_THEME + let PRISM_PREVIOUS + if (JSON.parse(BLOG.PRISM_THEME_SWITCH)) { + if (isDarkMode) { + PRISM_THEME = BLOG.PRISM_THEME_DARK_PATH + PRISM_PREVIOUS = BLOG.PRISM_THEME_LIGHT_PATH + } else { + PRISM_THEME = BLOG.PRISM_THEME_LIGHT_PATH + PRISM_PREVIOUS = BLOG.PRISM_THEME_DARK_PATH + } + const previousTheme = document.querySelector(`link[href="${PRISM_PREVIOUS}"]`) + if (previousTheme) { + previousTheme.parentNode.removeChild(previousTheme) + } + loadExternalResource(PRISM_THEME, 'css') + } else { + loadExternalResource(BLOG.PRISM_THEME_PREFIX_PATH, 'css') + } +} + +/* * 将代码块转为可折叠对象 */ const renderCollapseCode = () => { @@ -58,7 +89,7 @@ const renderCollapseCode = () => { const collapseWrapper = document.createElement('div') collapseWrapper.className = 'collapse-wrapper w-full py-2' const panelWrapper = document.createElement('div') - panelWrapper.className = 'border rounded-md border-indigo-500' + panelWrapper.className = 'border dark:border-gray-600 rounded-md hover:border-indigo-500 duration-200 transition-colors' const header = document.createElement('div') header.className = 'flex justify-between items-center px-4 py-2 cursor-pointer select-none' @@ -80,7 +111,6 @@ const renderCollapseCode = () => { panel.classList.toggle('h-auto') header.querySelector('svg').classList.toggle('rotate-180') panelWrapper.classList.toggle('border-gray-300') - panelWrapper.classList.toggle('border-indigo-500') }) } } @@ -128,7 +158,7 @@ function renderPrismMac() { const container = document?.getElementById('notion-article') // Add line numbers - if (BLOG.CODE_LINE_NUMBERS === 'true') { + if (JSON.parse(BLOG.CODE_LINE_NUMBERS)) { const codeBlocks = container?.getElementsByTagName('pre') if (codeBlocks) { Array.from(codeBlocks).forEach(item => { @@ -162,7 +192,7 @@ function renderPrismMac() { } // 折叠代码行号bug - if (BLOG.CODE_LINE_NUMBERS === 'true') { + if (JSON.parse(BLOG.CODE_LINE_NUMBERS)) { fixCodeLineStyle() } } diff --git a/public/css/prism-mac-style.css b/public/css/prism-mac-style.css index 33cdfd10..2162f359 100644 --- a/public/css/prism-mac-style.css +++ b/public/css/prism-mac-style.css @@ -11,6 +11,10 @@ margin-bottom: 0.5rem; } +.collapse-wrapper .code-toolbar { + margin-bottom: 0; +} + .toolbar-item{ white-space: nowrap; } @@ -21,7 +25,7 @@ pre[class*='language-'] { margin-top: 0rem !important; - margin-bottom: 0rem !important; + // margin-bottom: 0rem !important; padding-top: 1.5rem !important; } diff --git a/styles/notion.css b/styles/notion.css index 6e47807b..965723be 100644 --- a/styles/notion.css +++ b/styles/notion.css @@ -746,6 +746,8 @@ svg.notion-page-icon { .notion .notion-code { font-size: 85%; + margin-top: 0; + margin-bottom: 0.5em; } pre[class*='language-'] {