diff --git a/blog.config.js b/blog.config.js index ff8de6b4..5511ddfa 100644 --- a/blog.config.js +++ b/blog.config.js @@ -55,6 +55,7 @@ const BLOG = { BEI_AN: process.env.NEXT_PUBLIC_BEI_AN || '', // 备案号 闽ICP备XXXXXXX // 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 CODE_MAC_BAR: true, // 代码左上角显示mac的红黄绿图标 diff --git a/components/PrismMac.js b/components/PrismMac.js index 88575f30..60cc0983 100644 --- a/components/PrismMac.js +++ b/components/PrismMac.js @@ -1,13 +1,14 @@ import React from 'react' import Prism from 'prismjs' +// 所有语言的prismjs 使用autoloader引入 +// import 'prismjs/plugins/autoloader/prism-autoloader' import 'prismjs/plugins/toolbar/prism-toolbar' import 'prismjs/plugins/toolbar/prism-toolbar.min.css' import 'prismjs/plugins/show-language/prism-show-language' import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard' import 'prismjs/plugins/line-numbers/prism-line-numbers' import 'prismjs/plugins/line-numbers/prism-line-numbers.css' -// 所有语言的prismjs 使用autoloader引入 -import 'prismjs/plugins/autoloader/prism-autoloader' + // mermaid图 import BLOG from '@/blog.config' import { isBrowser, loadExternalResource } from '@/lib/utils' @@ -18,18 +19,17 @@ 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') } + loadExternalResource(BLOG.PRISM_THEME_PATH, 'css') + loadExternalResource(BLOG.PRISM_JS_AUTO_LOADER, 'js').then((e) => { + Prism.plugins.autoloader.languages_path = BLOG.PRISM_JS_PATH + renderPrismMac() + }) } React.useEffect(() => { - renderPrismMac() renderMermaid() }, []) return <>