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

- 簡化 config.pug 中的高亮設置檢測邏輯 - 重構滾動條樣式，提取為可重用的 $scrollbar-style - 優化 JavaScript 代碼高亮邏輯，增加對默認高亮的支持 - 修復打賞彈窗的邊框圓角應用位置 - 改善代碼高亮工具的檢測和處理流程
2026-04-06 19:17:07 +08:00 · 2026-01-10 13:19:23 +08:00
parent c771efa9bc
commit b0951197a9
7 changed files with 40 additions and 35 deletions
--- a/layout/includes/head/config.pug
+++ b/layout/includes/head/config.pug
@@ -72,20 +72,16 @@
    })
  }

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

 script.
  const GLOBAL_CONFIG = {
--- a/package.json
+++ b/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": {
--- a/source/css/_highlight/highlight.styl
+++ b/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
--- a/source/css/_highlight/highlight/diff.styl
+++ b/source/css/_highlight/highlight/diff.styl
@@ -1,11 +1,6 @@
 figure.highlight
  table
-    // scrollbar - firefox
-    @-moz-document url-prefix()
-      scrollbar-color: var(--hlscrollbar-bg) transparent
-
-    &::-webkit-scrollbar-thumb
-      background: var(--hlscrollbar-bg)
+    @extend $scrollbar-style

  pre .deletion
    color: $highlight-deletion
--- a/source/css/_highlight/prismjs/index.styl
+++ b/source/css/_highlight/prismjs/index.styl
@@ -6,12 +6,7 @@ if $highlight_theme != false

 .container
  pre[class*='language-']
-    // scrollbar - firefox
-    @-moz-document url-prefix()
-      scrollbar-color: var(--hlscrollbar-bg) transparent
-
-    &::-webkit-scrollbar-thumb
-      background: var(--hlscrollbar-bg)
+    @extend $scrollbar-style

    &:not(.line-numbers)
      padding: 10px 20px
--- a/source/css/_layout/reward.styl
+++ b/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
--- a/source/js/main.js
+++ b/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) {
-        langName = item.getAttribute('data-language') || 'Code'
+      if (isNotHighlightJs) {
+        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'