Merge pull request #1257 from jxpeng98/enhance-code-highlight-switch

Enhance code highlight switch

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

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()
   }
 }

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;
 
 }

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-'] {