feat: 適配 hexo 5.0.0 的 prismjs, 代碼主題和各項功能

refactor: 移除 代碼default主題
fix: 修復夜間模式下代碼塊有背景的bugs（沒開啟渲染的情況下）
feat: 增加 code font-size配置 close #322
refactor: 更改配置中 code-font 為 code-font-family
feat: Pjax下，刷新頁面時，會滾動到上次瀏覽的位置
fix: 修復mathjax溢出屏幕的Bugs close #321

_config.yml

@@ -23,7 +23,7 @@ hide_sidebar_menu_child: false
 # Code Blocks (代碼相關)
 # --------------------------------------
 
-highlight_theme: light # default / darker / pale night / light / ocean / mac / mac light / false
+highlight_theme: light #  darker / pale night / light / ocean / mac / mac light / false
 highlight_copy: true # copy button
 highlight_lang: true # show the code language
 highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
@@ -550,9 +550,10 @@ beautify:
 # Global font settings
 # Don't modify the following settings unless you know how they work (非必要不要修改)
 font:
-  global-font-size: # The unit must be 'px', default is 14px
+  global-font-size:
+  code-font-size:
   font-family:
-  code-font:
+  code-font-family:
 
 # Font settings for the site title and site subtitle
 # 左上角網站名字 主頁居中網站名字
@@ -869,3 +870,8 @@ CDN:
   aplayer_css: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css
   aplayer_js: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js
   meting_js: https://cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js
+
+  # Prism.js
+  prismjs_js: https://cdn.jsdelivr.net/npm/prismjs/prism.min.js
+  prismjs_lineNumber_js: https://cdn.jsdelivr.net/npm/prismjs/plugins/line-numbers/prism-line-numbers.min.js
+  prismjs_autoloader: https://cdn.jsdelivr.net/npm/prismjs/plugins/autoloader/prism-autoloader.min.js

layout/includes/additional-js.pug

@@ -46,6 +46,8 @@ div
 
   !=fragment_cache('injectBottom', function(){return injectHtml(theme.inject.bottom)})
 
+  !=partial('includes/third-party/prismjs', {}, {cache:theme.fragment_cache})
+
   !=partial('includes/third-party/effect', {}, {cache:theme.fragment_cache})
 
   !=partial('includes/third-party/chat/index', {}, {cache:theme.fragment_cache})

layout/includes/third-party/math/mathjax.pug

@@ -28,7 +28,15 @@ script.
               math.end = {node: text, delim: '', n: 0}
               doc.math.push(math)
             }
-          }, '']
+          }, ''],
+          addClass: [200,() => {
+            document.querySelectorAll('mjx-container:not([display=\'true\']').forEach( node => {
+              const target = node.parentNode
+              if (!target.classList.contains('has-jax')) {
+                target.classList.add('mathjax-overflow')
+              }
+            })
+          }, '', false]
         }
       }
     }

layout/includes/third-party/pjax.pug

@@ -23,6 +23,8 @@ script.
     elements: '!{pjaxExclude}',
     selectors: pjaxSelectors,
     cacheBust: false,
+    analytics: !{theme.google_analytics ? true : false},
+    scrollRestoration: false
   })
 
   document.addEventListener('pjax:complete', function () {
@@ -47,6 +49,9 @@ script.
     if (!{theme.tencent_analytics ? true : false}) {
       MtaH5.pgv()
     }
+
+    // prismjs
+    typeof Prism === 'object' && Prism.highlightAll()
   })
 
 
@@ -65,5 +70,6 @@ script.
 
     //reset readmode
     $('body').hasClass('read-mode') && $('body').removeClass('read-mode')
+
   })
 

layout/includes/third-party/prismjs.pug

@@ -0,0 +1,5 @@
+if config.prismjs && config.prismjs.enable && !config.prismjs.preprocess
+  script(src=url_for(theme.CDN.prismjs_js))
+  script(src=url_for(theme.CDN.prismjs_autoloader))
+  if config.prismjs.line_number
+    script(src=url_for(theme.CDN.prismjs_lineNumber_js))

source/css/_highlight/highlight.styl

@@ -1,12 +1,16 @@
 // https://github.com/equinusocio/vsc-material-theme
 $highlight_theme = hexo-config('highlight_theme')
+$highlighEnable = hexo-config('rootConfig.highlight') && hexo-config('rootConfig.highlight.enable')
+$prismjsEnable = hexo-config('rootConfig.prismjs') && hexo-config('rootConfig.prismjs.enable')
+wordWrap = !hexo-config('rootConfig.highlight.line_number') && hexo-config('code_word_wrap')
 
 @require 'theme'
 
-if $highlight_theme != false
+if $highlighEnable
-  @require 'diff'
+  @require 'highlight/index'
 
-wordWrap = !hexo-config('rootConfig.highlight.line_number') && hexo-config('code_word_wrap')
+if $prismjsEnable
+  @require 'prismjs/index'
 
 $code-block
   overflow: auto
@@ -45,7 +49,7 @@ blockquote
 #article-container
   pre,
   code
-    font-family: $code-font !important
+    font-family: $code-font-family !important
 
   code
     padding: .1rem .2rem
@@ -58,6 +62,7 @@ blockquote
   pre
     @extend $code-block
     padding: 10px 20px
+    font-size: $code-font-size
 
     code
       padding: 0
@@ -74,55 +79,6 @@ blockquote
       padding: 8px 0
       border: none
 
-    .line
-      if wordWrap
-        &:before
-          display: inline-block
-          padding: 0 .3rem 0 0
-          min-width: 1.6rem
-          color: $highlight-gutter.color
-          content: counter(line)
-          counter-increment: line
-          text-align: left
-
-      &.marked
-        background-color: $highlight-selection
-
-    table
-      display: block
-      overflow: auto
-      border: none
-
-    td
-      padding: 0
-      border: none
-
-    figcaption
-      clearfix()
-      padding: .3rem 0 .1rem .7rem
-      font-size: 1em
-      line-height: 1em
-
-      a
-        float: right
-        padding-right: 10px
-        color: $highlight-foreground
-
-        &:hover
-          border-bottom-color: $highlight-foreground
-
-    .gutter pre
-      padding-right: .5rem
-      padding-left: .5rem
-      background-color: $highlight-gutter.bg-color
-      color: $highlight-gutter.color
-      text-align: right
-
-    .code pre
-      padding-right: .5rem
-      padding-left: .5rem
-      width: 100%
-
   .highlight-tools
     position: relative
     display: flex

source/css/_highlight/highlight/index.styl

@@ -0,0 +1,54 @@
+if $highlight_theme != false
+  @require 'diff'
+
+#article-container
+  figure.highlight
+    .line
+      if wordWrap
+        &:before
+          display: inline-block
+          padding: 0 .3rem 0 0
+          min-width: 1.6rem
+          color: $highlight-gutter.color
+          content: counter(line)
+          counter-increment: line
+          text-align: left
+
+      &.marked
+        background-color: $highlight-selection
+
+    table
+      display: block
+      overflow: auto
+      border: none
+
+    td
+      padding: 0
+      border: none
+
+    figcaption
+      clearfix()
+      padding: .3rem 0 .1rem .7rem
+      font-size: 1em
+      line-height: 1em
+
+      a
+        float: right
+        padding-right: 10px
+        color: $highlight-foreground
+
+        &:hover
+          border-bottom-color: $highlight-foreground
+
+    .gutter pre
+      padding-right: .5rem
+      padding-left: .5rem
+      background-color: $highlight-gutter.bg-color
+      color: $highlight-gutter.color
+      text-align: right
+
+    .code pre
+      padding-right: .5rem
+      padding-left: .5rem
+      width: 100%
+

source/css/_highlight/prismjs/diff.styl

@@ -0,0 +1,302 @@
+if $highlight_theme == 'light' || ($highlight_theme == 'mac light')
+  // prism-base16-ateliersulphurpool.light
+  pre[class*='language-']
+    .token.function
+      color: #ffb62c
+
+    .token.comment,
+    .token.prolog,
+    .token.doctype,
+    .token.cdata
+      color: rgba(149, 165, 166, .8)
+
+    .token.punctuation
+      color: #5e6687
+
+    .token.namespace
+      opacity: .7
+
+    .token.operator,
+    .token.boolean,
+    .token.number
+      color: #c76b29
+
+    .token.property
+      color: #c08b30
+
+    .token.tag
+      color: #3d8fd1
+
+    .token.string
+      color: #22a2c9
+
+    .token.selector
+      color: #6679cc
+
+    .token.attr-name
+      color: #c76b29
+
+    .token.entity,
+    .token.url,
+    .language-css .token.string,
+    .style .token.string
+      color: #22a2c9
+
+    .token.attr-value,
+    .token.keyword,
+    .token.control,
+    .token.directive,
+    .token.unit
+      color: #ac9739
+
+    .token.statement,
+    .token.regex,
+    .token.atrule
+      color: #22a2c9
+
+    .token.placeholder,
+    .token.variable
+      color: #3d8fd1
+
+    .token.deleted
+      text-decoration: line-through
+
+    .token.inserted
+      border-bottom: 1px dotted #202746
+      text-decoration: none
+
+    .token.italic
+      font-style: italic
+
+    .token.important,
+    .token.bold
+      font-weight: bold
+
+    .token.important
+      color: #c94922
+
+    .token.entity
+      cursor: help
+
+    pre > code.highlight
+      outline: .4em solid #c94922
+      outline-offset: .4em
+
+if $highlight_theme == 'darker' || ($highlight_theme == 'mac')
+  // prism-atom-dark
+  pre[class*='language-']
+    .token.comment,
+    .token.prolog,
+    .token.doctype,
+    .token.cdata
+      color: #7C7C7C
+
+    .token.punctuation
+      color: #c5c8c6
+
+    .namespace
+      opacity: .7
+
+    .token.property,
+    .token.keyword,
+    .token.tag
+      color: #96CBFE
+
+    .token.class-name
+      color: #FFFFB6
+
+    .token.boolean,
+    .token.constant
+      color: #99CC99
+
+    .token.symbol,
+    .token.deleted
+      color: #f92672
+
+    .token.number
+      color: #FF73FD
+
+    .token.selector,
+    .token.attr-name,
+    .token.string,
+    .token.char,
+    .token.builtin,
+    .token.inserted
+      color: #A8FF60
+
+    .token.variable
+      color: #C6C5FE
+
+    .token.operator
+      color: #EDEDED
+
+    .token.entity
+      color: #FFFFB6
+      cursor: help
+
+    .token.url
+      color: #96CBFE
+
+    .language-css .token.string,
+    .style .token.string
+      color: #87C38A
+
+    .token.atrule,
+    .token.attr-value
+      color: #F9EE98
+
+    .token.function
+      color: #DAD085
+
+    .token.regex
+      color: #E9C062
+
+    .token.important
+      color: #fd971f
+
+    .token.important,
+    .token.bold
+      font-weight: bold
+
+    .token.italic
+      font-style: italic
+
+if $highlight_theme == 'pale night'
+  // prism-dracula
+  pre[class*='language-']
+    .token.comment,
+    .token.prolog,
+    .token.doctype,
+    .token.cdata
+      color: #6272a4
+
+    .token.punctuation
+      color: #f8f8f2
+
+    .namespace
+      opacity: .7
+
+    .token.property,
+    .token.tag,
+    .token.constant,
+    .token.symbol,
+    .token.deleted
+      color: #ff79c6
+
+    .token.boolean,
+    .token.number
+      color: #bd93f9
+
+    .token.selector,
+    .token.attr-name,
+    .token.string,
+    .token.char,
+    .token.builtin,
+    .token.inserted
+      color: #50fa7b
+
+    .token.operator,
+    .token.entity,
+    .token.url,
+    .language-css .token.string,
+    .style .token.string,
+    .token.variable
+      color: #f8f8f2
+
+    .token.atrule,
+    .token.attr-value,
+    .token.function,
+    .token.class-name
+      color: #f1fa8c
+
+    .token.keyword
+      color: #8be9fd
+
+    .token.regex,
+    .token.important
+      color: #ffb86c
+
+    .token.important,
+    .token.bold
+      font-weight: bold
+
+    .token.italic
+      font-style: italic
+
+    .token.entity
+      cursor: help
+
+if $highlight_theme == 'ocean'
+  // prism-material-oceanic
+  pre[class*='language-']
+    &.language-css > code,
+    &.language-sass > code,
+    &.language-scss > code
+      color: #fd9170 !important
+
+    .namespace
+      opacity: .7
+
+    .token.atrule,
+    .token.symbol,
+    .token.constant,
+    .token.boolean,
+    .token.function
+      color: #c792ea
+
+    .token.attr-name,
+    .token.builtin,
+    .token.class
+      color: #ffcb6b
+
+    .token.attr-value,
+    .token.attribute,
+    .token.pseudo-class,
+    .token.pseudo-element,
+    .token.string
+      color: #c3e88d
+
+    .token.cdata,
+    .token.property,
+    .token.char,
+    .token.inserted
+      color: #80cbc4
+
+    .token.class-name,
+    .token.color,
+    .token.hexcode,
+    .token.regex
+      color: #f2ff00
+
+    .token.comment,
+    .token.prolog,
+    .token.doctype
+      color: #546e7a
+
+    .token.deleted,
+    .token.variable,
+    .token.entity,
+    .token.selector,
+    .token.tag,
+    .token.unit
+      color: #f07178
+
+    .token.id
+      color: #c792ea
+      font-weight: bold
+
+    .token.important
+      color: #c792ea
+      font-weight: bold
+
+    .token.keyword
+      color: #c792ea
+      font-style: italic
+
+    .token.number,
+    .token.url
+      color: #fd9170
+
+    .token.operator,
+    .token.punctuation
+      color: #89ddff

source/css/_highlight/prismjs/index.styl

@@ -0,0 +1,13 @@
+if hexo-fonfig('rootConfig.prismjs.line_number')
+  @require 'line-number'
+
+if $highlight_theme != false
+  @require 'diff'
+
+#article-container
+  pre[class*='language-']
+    &::-webkit-scrollbar-thumb
+      background: $highlight-scrollbar
+
+    &:not(.line-numbers)
+      padding: 10px 20px

source/css/_highlight/prismjs/line-number.styl

@@ -0,0 +1,34 @@
+#article-container
+  pre[class*='language-']
+    &.line-numbers
+      position: relative
+      padding-left: 3.8em
+      counter-reset: linenumber
+      line-height: $line-height-code-block
+
+      > code
+        position: relative
+        white-space: inherit
+        line-height: $line-height-code-block
+
+      .line-numbers-rows
+        position: absolute
+        top: 0
+        left: -3.8em
+        width: 3em
+        letter-spacing: -1px
+        font-size: 100%
+        pointer-events: none
+        user-select: none
+
+        & > span
+          display: block
+          counter-increment: linenumber
+          pointer-events: none
+
+          &:before
+            display: block
+            padding-right: .8em
+            color: $highlight-gutter.color
+            content: counter(linenumber)
+            text-align: right

source/css/_highlight/theme.styl

@@ -1,45 +1,7 @@
-$highlight_theme = hexo-config('highlight_theme')
-
-if $highlight_theme == 'default'
-  $highlight-background = #263238
-  $highlight-current-line = #efefef
-  $highlight-selection = #80CBC420
-  $highlight-foreground = #EEFFFF
-  $highlight-comment = #546E7A
-  $highlight-red = #FF5370
-  $highlight-orange = #F78C6C
-  $highlight-yellow = #FFCB6B
-  $highlight-green = #C3E88D
-  $highlight-aqua = #89DDFF
-  $highlight-blue = #82AAFF
-  $highlight-purple = #C792EA
-  $highlight-deletion = #BF42BF
-  $highlight-addition = #105EDE
-  $highlight-gutter = {
-    color: alpha($highlight-foreground, .5),
-    bg-color: $highlight-background
-  }
-  $highlight-tools = {
-    color: alpha($highlight-foreground, .8),
-    bg-color: darken($highlight-background, 2)
-  }
-  $highlight-scrollbar = darken($highlight-background, 6)
-
 if $highlight_theme == 'darker' || ($highlight_theme == 'mac')
   $highlight-background = #212121
-  $highlight-current-line = #282a2e
   $highlight-selection = #61616150
   $highlight-foreground = #EEFFFF
-  $highlight-comment = #969896
-  $highlight-red = #FF5370
-  $highlight-orange = #F78C6C
-  $highlight-yellow = #FFCB6B
-  $highlight-green = #C3E88D
-  $highlight-aqua = #89DDFF
-  $highlight-blue = #82AAFF
-  $highlight-purple = #C792EA
-  $highlight-deletion = #BF42BF
-  $highlight-addition = #105EDE
   $highlight-mac-border = rgba(0, 0, 0, .4)
   $highlight-gutter = {
     color: alpha($highlight-foreground, .5),
@@ -51,12 +13,8 @@ if $highlight_theme == 'darker' || ($highlight_theme == 'mac')
   }
   $highlight-scrollbar = darken($highlight-background, 6)
 
-if $highlight_theme == 'pale night'
+  if $highlighEnable
-  $highlight-background = #292D3E
+    $highlight-comment = #969896
-  $highlight-current-line = #393939
-  $highlight-selection = #717CB450
-  $highlight-foreground = #A6ACCD
-  $highlight-comment = #676E95
     $highlight-red = #FF5370
     $highlight-orange = #F78C6C
     $highlight-yellow = #FFCB6B
@@ -66,6 +24,11 @@ if $highlight_theme == 'pale night'
     $highlight-purple = #C792EA
     $highlight-deletion = #BF42BF
     $highlight-addition = #105EDE
+
+if $highlight_theme == 'pale night'
+  $highlight-background = #292D3E
+  $highlight-selection = #717CB450
+  $highlight-foreground = #A6ACCD
   $highlight-gutter = {
     color: alpha($highlight-foreground, .5),
     bg-color: $highlight-background
@@ -76,12 +39,8 @@ if $highlight_theme == 'pale night'
   }
   $highlight-scrollbar = darken($highlight-background, 6)
 
-if $highlight_theme == 'ocean'
+  if $highlighEnable
-  $highlight-background = #0F111A
+    $highlight-comment = #676E95
-  $highlight-current-line = #000000
-  $highlight-selection = #717CB450
-  $highlight-foreground = #8F93A2
-  $highlight-comment = rgba(101, 115, 126, .8)
     $highlight-red = #FF5370
     $highlight-orange = #F78C6C
     $highlight-yellow = #FFCB6B
@@ -91,6 +50,11 @@ if $highlight_theme == 'ocean'
     $highlight-purple = #C792EA
     $highlight-deletion = #BF42BF
     $highlight-addition = #105EDE
+
+if $highlight_theme == 'ocean'
+  $highlight-background = #0F111A
+  $highlight-selection = #717CB450
+  $highlight-foreground = #8F93A2
   $highlight-gutter = {
     color: alpha($highlight-foreground, .5),
     bg-color: $highlight-background
@@ -101,11 +65,34 @@ if $highlight_theme == 'ocean'
   }
   $highlight-scrollbar = darken($highlight-background, 5)
 
+  if $highlighEnable
+    $highlight-comment = rgba(101, 115, 126, .8)
+    $highlight-red = #FF5370
+    $highlight-orange = #F78C6C
+    $highlight-yellow = #FFCB6B
+    $highlight-green = #C3E88D
+    $highlight-aqua = #89DDFF
+    $highlight-blue = #82AAFF
+    $highlight-purple = #C792EA
+    $highlight-deletion = #BF42BF
+    $highlight-addition = #105EDE
+
 if $highlight_theme == 'light' || ($highlight_theme == 'mac light')
   $highlight-background = #F6F8FA
-  $highlight-current-line = #00346e
   $highlight-selection = #80CBC440
   $highlight-foreground = #90A4AE
+  $highlight-mac-border = rgba(144, 164, 174, .4)
+  $highlight-tools = {
+    color: $highlight-foreground,
+    bg-color: darken($highlight-background, 5)
+  }
+  $highlight-gutter = {
+    color: alpha($highlight-foreground, .5),
+    bg-color: $highlight-background
+  }
+  $highlight-scrollbar = darken($highlight-background, 8)
+
+  if $highlighEnable
     $highlight-comment = rgba(149, 165, 166, .8)
     $highlight-red = #E53935
     $highlight-orange = #F76D47
@@ -116,16 +103,6 @@ if $highlight_theme == 'light' || ($highlight_theme == 'mac light')
     $highlight-purple = #7C4DFF
     $highlight-deletion = #BF42BF
     $highlight-addition = #105EDE
-  $highlight-mac-border = rgba(144, 164, 174, .4)
-  $highlight-gutter = {
-    color: alpha($highlight-foreground, .5),
-    bg-color: $highlight-background
-  }
-  $highlight-tools = {
-    color: $highlight-foreground,
-    bg-color: darken($highlight-background, 5)
-  }
-  $highlight-scrollbar = darken($highlight-background, 8)
 
 if $highlight_theme == false
   $highlight-background = #F6F8FA

source/css/_layout/third-party.styl

@@ -59,12 +59,14 @@
     padding: .3rem 0 .8em
 
 // mathjax
+.mathjax-overflow
+  overflow-x: auto
+  overflow-y: hidden
+
 mjx-container[jax='CHTML'][display='true']
   overflow-x: auto
   overflow-y: hidden
-  padding-bottom: .5rem
+  padding-bottom: .3rem
-  outline: 0
-  line-height: 2
 
 .aplayer
   color: $font-black

source/css/_mode/darkmode.styl

@@ -44,9 +44,13 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
     #page-header
       background-color: #121212
 
-    #article-container code
+    #article-container 
+      code
         background: #2c2c2c
 
+      pre > code 
+        background: 0
+
     // 頭部
     #page-header
       &:before
@@ -74,6 +78,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
       figure.highlight
         box-shadow: none
         
+        if hexo-config('rootConfig.highlight') && hexo-config('rootConfig.highlight.enable')
           table::-webkit-scrollbar-thumb
             background: lighten(#121212, 5)
 
@@ -83,6 +88,9 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
           .hljs
             background-color: lighten(#121212, 2) !important
         
+        pre[class*='language-']::-webkit-scrollbar-thumb
+          background: lighten(#121212, 5)
+
         .highlight-tools
           background: lighten(#121212, 3) !important
           color: #90a4ae !important

source/css/var.styl

@@ -16,7 +16,7 @@ $theme-toc-color = $themeColorEnable && hexo-config('theme_color.toc_color') ? c
 $dafault-font-family = -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif
 $dafault-code-font = consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', sans-serif
 $font-family = hexo-config('font.font-family') ? unquote(hexo-config('font.font-family')) : $dafault-font-family
-$code-font = hexo-config('font.code-font') ? unquote(hexo-config('font.code-font')) : $dafault-code-font
+$code-font-family = hexo-config('font.code-font-family') ? unquote(hexo-config('font.code-font-family')) : $dafault-code-font
 $site-name-font = hexo-config('blog_title_font.font-family') ? unquote(hexo-config('blog_title_font.font-family')) : $font-family
 // hr
 $hrEnable = hexo-config('hr_icon') && hexo-config('hr_icon.enable')
@@ -28,6 +28,7 @@ $title-prefix-icon = $beautifyEnable ? hexo-config('beautify.title-prefix-icon')
 $title-prefix-icon-color = $beautifyEnable ? convert(hexo-config('beautify.title-prefix-icon-color')) : $light-red
 // Global Variables
 $font-size = hexo-config('font.global-font-size') ? convert(hexo-config('font.global-font-size')) : 14px
+$code-font-size = hexo-config('font.code-font-size') ? convert(hexo-config('font.code-font-size')) : $font-size
 $font-color = #1F2D3D
 $rem = 20px
 $text-line-height = 2