feat: 優化代碼高亮系統並修復樣式問題 (v5.5.4-b1)

- 簡化 config.pug 中的高亮設置檢測邏輯
- 重構滾動條樣式，提取為可重用的 $scrollbar-style
- 優化 JavaScript 代碼高亮邏輯，增加對默認高亮的支持
- 修復打賞彈窗的邊框圓角應用位置
- 改善代碼高亮工具的檢測和處理流程

layout/includes/head/config.pug

@@ -72,20 +72,16 @@
     })
   }
 
-  let highlight = 'undefined'
+  let highlightProvider = config.syntax_highlighter || (config.highlight.enable ? 'highlight.js' : config.prismjs.enable ? 'prismjs' : null)
-  let syntaxHighlighter = config.syntax_highlighter
+  const { copy, language, height_limit, fullpage, macStyle, shrink } = theme.code_blocks
-  let highlightEnable = syntaxHighlighter ? ['highlight.js', 'prismjs'].includes(syntaxHighlighter) : (config.highlight.enable || config.prismjs.enable)
+  let highlight = JSON.stringify({
-  if (highlightEnable) {
+    plugin: highlightProvider,
-    const { copy, language, height_limit, fullpage, macStyle } = theme.code_blocks
+    highlightCopy: copy,
-    highlight = JSON.stringify({
+    highlightLang: language,
-      plugin: syntaxHighlighter ? syntaxHighlighter : config.highlight.enable ? 'highlight.js' : 'prismjs',
+    highlightHeightLimit: height_limit,
-      highlightCopy: copy,
+    highlightFullpage: fullpage,
-      highlightLang: language,
+    highlightMacStyle: macStyle
-      highlightHeightLimit: height_limit,
+  })
-      highlightFullpage: fullpage,
-      highlightMacStyle: macStyle
-    })
-  }
 
 script.
   const GLOBAL_CONFIG = {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "5.5.3",
+  "version": "5.5.4-b1",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {

source/css/_highlight/highlight.styl

@@ -24,6 +24,14 @@ wordWrap = $highlight_enable && !$highlight_line_number && hexo-config('code_blo
   --hlscrollbar-bg: lighten(#121212, 5)
   --hlexpand-bg: linear-gradient(180deg, rgba(lighten(#121212, 2), .6), rgba(lighten(#121212, 2), .9))
 
+$scrollbar-style
+  // scrollbar - firefox
+  @-moz-document url-prefix()
+    scrollbar-color: var(--hlscrollbar-bg) transparent
+
+  &::-webkit-scrollbar-thumb
+    background: var(--hlscrollbar-bg)
+
 if $highlight_enable
   @require 'highlight/index'
 
@@ -88,6 +96,11 @@ $code-block
         &:hover
           border-bottom-color: var(--hl-color)
 
+    &.default
+      pre
+        padding: 10px 20px
+        @extend $scrollbar-style
+
     &.copy-true
       user-select: all
       -webkit-user-select: all

source/css/_highlight/highlight/diff.styl

@@ -1,11 +1,6 @@
 figure.highlight
   table
-    // scrollbar - firefox
+    @extend $scrollbar-style
-    @-moz-document url-prefix()
-      scrollbar-color: var(--hlscrollbar-bg) transparent
-
-    &::-webkit-scrollbar-thumb
-      background: var(--hlscrollbar-bg)
 
   pre .deletion
     color: $highlight-deletion

source/css/_highlight/prismjs/index.styl

@@ -6,12 +6,7 @@ if $highlight_theme != false
 
 .container
   pre[class*='language-']
-    // scrollbar - firefox
+    @extend $scrollbar-style
-    @-moz-document url-prefix()
-      scrollbar-color: var(--hlscrollbar-bg) transparent
-
-    &::-webkit-scrollbar-thumb
-      background: var(--hlscrollbar-bg)
 
     &:not(.line-numbers)
       padding: 10px 20px

source/css/_layout/reward.styl

@@ -37,13 +37,13 @@
     display: none
     padding: 0 0 15px
     width: 100%
-    addBorderRadius()
 
     .reward-all
       display: inline-block
       margin: 0
       padding: 20px 10px
       background: var(--reward-pop)
+      addBorderRadius()
 
       &:before
         position: absolute

source/js/main.js

@@ -61,11 +61,14 @@ document.addEventListener('DOMContentLoaded', () => {
     const { highlightCopy, highlightLang, highlightHeightLimit, highlightFullpage, highlightMacStyle, plugin } = highLight
     const isHighlightShrink = GLOBAL_CONFIG_SITE.isHighlightShrink
     const isShowTool = highlightCopy || highlightLang || isHighlightShrink !== undefined || highlightFullpage || highlightMacStyle
-    const $figureHighlight = plugin === 'highlight.js' ? document.querySelectorAll('figure.highlight') : document.querySelectorAll('pre[class*="language-"]')
+    const isNotHighlightJs = plugin !== 'highlight.js'
+    const isPrismjs = plugin === 'prismjs'
+    const $figureHighlight = isNotHighlightJs
+      ? Array.from(document.querySelectorAll('code[class*="language-"]')).map(code => code.parentElement)
+      : document.querySelectorAll('figure.highlight')
 
     if (!((isShowTool || highlightHeightLimit) && $figureHighlight.length)) return
 
-    const isPrismjs = plugin === 'prismjs'
     const highlightShrinkClass = isHighlightShrink === true ? 'closed' : ''
     const highlightShrinkEle = isHighlightShrink !== undefined ? '<i class="fas fa-angle-down expand"></i>' : ''
     const highlightCopyEle = highlightCopy ? '<i class="fas fa-paste copy-button"></i>' : ''
@@ -133,7 +136,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const highlightCopyFn = (ele, clickEle) => {
       const $buttonParent = ele.parentNode
       $buttonParent.classList.add('copy-true')
-      const preCodeSelector = isPrismjs ? 'pre code' : 'table .code pre'
+      const preCodeSelector = isNotHighlightJs ? 'pre code' : 'table .code pre'
       const codeElement = $buttonParent.querySelector(preCodeSelector)
       if (!codeElement) return
       copy(codeElement.innerText, clickEle)
@@ -213,20 +216,23 @@ document.addEventListener('DOMContentLoaded', () => {
         fragment.appendChild(ele)
       }
 
-      isPrismjs ? item.parentNode.insertBefore(fragment, item) : item.insertBefore(fragment, item.firstChild)
+      isNotHighlightJs ? item.parentNode.insertBefore(fragment, item) : item.insertBefore(fragment, item.firstChild)
     }
 
     $figureHighlight.forEach(item => {
       let langName = ''
-      if (isPrismjs) btf.wrap(item, 'figure', { class: 'highlight' })
+      if (isNotHighlightJs) {
+        const newClassName = isPrismjs ? 'prismjs' : 'default'
+        btf.wrap(item, 'figure', { class: `highlight ${newClassName}` })
+      }
 
       if (!highlightLang) {
         createEle('', item)
         return
       }
 
-      if (isPrismjs) {
+      if (isNotHighlightJs) {
-        langName = item.getAttribute('data-language') || 'Code'
+        langName = isPrismjs ? item.getAttribute('data-language') || 'Code' : item.querySelector('code').getAttribute('class').replace('language-', '')
       } else {
         langName = item.getAttribute('class').split(' ')[1]
         if (langName === 'plain' || langName === undefined) langName = 'Code'