diff --git a/_config.yml b/_config.yml
index 0212fb6..072c750 100644
--- a/_config.yml
+++ b/_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
diff --git a/layout/includes/additional-js.pug b/layout/includes/additional-js.pug
index 263d805..70c1bc7 100644
--- a/layout/includes/additional-js.pug
+++ b/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})
diff --git a/layout/includes/third-party/math/mathjax.pug b/layout/includes/third-party/math/mathjax.pug
index b2b0747..d28b3b8 100644
--- a/layout/includes/third-party/math/mathjax.pug
+++ b/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]
         }
       }
     }
diff --git a/layout/includes/third-party/pjax.pug b/layout/includes/third-party/pjax.pug
index a50141f..cd35128 100644
--- a/layout/includes/third-party/pjax.pug
+++ b/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')
+
   })
 
diff --git a/layout/includes/third-party/prismjs.pug b/layout/includes/third-party/prismjs.pug
new file mode 100644
index 0000000..b277e25
--- /dev/null
+++ b/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))
diff --git a/source/css/_highlight/highlight.styl b/source/css/_highlight/highlight.styl
index fbbf373..94d13af 100644
--- a/source/css/_highlight/highlight.styl
+++ b/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
-  @require 'diff'
+if $highlighEnable
+  @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,101 +79,52 @@ 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
+  .highlight-tools
+    position: relative
+    display: flex
+    align-items: center
+    overflow: hidden
+    min-height: 1.2rem
+    height: 2.15em
+    background: $highlight-tools.bg-color
+    color: $highlight-tools.color
 
-      &.marked
-        background-color: $highlight-selection
+    &.closed + table
+      display: none
 
-    table
-      display: block
-      overflow: auto
-      border: none
+    .expand
+      position: absolute
+      padding: .4rem .7rem
+      cursor: pointer
+      transition: transform .3s
 
-    td
-      padding: 0
-      border: none
+      & + .code-lang
+        left: 1.7rem
 
-    figcaption
-      clearfix()
-      padding: .3rem 0 .1rem .7rem
-      font-size: 1em
-      line-height: 1em
+      &.closed
+        transition: all .3s
+        transform: rotate(-90deg) !important
 
-      a
-        float: right
-        padding-right: 10px
-        color: $highlight-foreground
+    .code-lang
+      position: absolute
+      left: .7rem
+      text-transform: capitalize
+      font-weight: bold
+      font-size: 1.15em
 
-        &:hover
-          border-bottom-color: $highlight-foreground
+    .copy-notice
+      position: absolute
+      right: 1.7rem
+      opacity: 0
 
-    .gutter pre
-      padding-right: .5rem
-      padding-left: .5rem
-      background-color: $highlight-gutter.bg-color
-      color: $highlight-gutter.color
-      text-align: right
+    .copy-button
+      position: absolute
+      right: .7rem
+      cursor: pointer
+      transition: color .2s
 
-    .code pre
-      padding-right: .5rem
-      padding-left: .5rem
-      width: 100%
-
-    .highlight-tools
-      position: relative
-      display: flex
-      align-items: center
-      overflow: hidden
-      min-height: 1.2rem
-      height: 2.15em
-      background: $highlight-tools.bg-color
-      color: $highlight-tools.color
-
-      &.closed + table
-        display: none
-
-      .expand
-        position: absolute
-        padding: .4rem .7rem
-        cursor: pointer
-        transition: transform .3s
-
-        & + .code-lang
-          left: 1.7rem
-
-        &.closed
-          transition: all .3s
-          transform: rotate(-90deg) !important
-
-      .code-lang
-        position: absolute
-        left: .7rem
-        text-transform: capitalize
-        font-weight: bold
-        font-size: 1.15em
-
-      .copy-notice
-        position: absolute
-        right: 1.7rem
-        opacity: 0
-
-      .copy-button
-        position: absolute
-        right: .7rem
-        cursor: pointer
-        transition: color .2s
-
-        &:hover
-          color: $theme-color
+      &:hover
+        color: $theme-color
 
   .gutter
     user-select: none
diff --git a/source/css/_highlight/diff.styl b/source/css/_highlight/highlight/diff.styl
similarity index 100%
rename from source/css/_highlight/diff.styl
rename to source/css/_highlight/highlight/diff.styl
diff --git a/source/css/_highlight/highlight/index.styl b/source/css/_highlight/highlight/index.styl
new file mode 100644
index 0000000..3978700
--- /dev/null
+++ b/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%
+
diff --git a/source/css/_highlight/prismjs/diff.styl b/source/css/_highlight/prismjs/diff.styl
new file mode 100644
index 0000000..1e63c79
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/source/css/_highlight/prismjs/index.styl b/source/css/_highlight/prismjs/index.styl
new file mode 100644
index 0000000..b3bf644
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/source/css/_highlight/prismjs/line-number.styl b/source/css/_highlight/prismjs/line-number.styl
new file mode 100644
index 0000000..a6bd858
--- /dev/null
+++ b/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
diff --git a/source/css/_highlight/theme.styl b/source/css/_highlight/theme.styl
index 2219861..93d93fd 100644
--- a/source/css/_highlight/theme.styl
+++ b/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,21 +13,22 @@ if $highlight_theme == 'darker' || ($highlight_theme == 'mac')
   }
   $highlight-scrollbar = darken($highlight-background, 6)
 
+  if $highlighEnable
+    $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
+
 if $highlight_theme == 'pale night'
   $highlight-background = #292D3E
-  $highlight-current-line = #393939
   $highlight-selection = #717CB450
   $highlight-foreground = #A6ACCD
-  $highlight-comment = #676E95
-  $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
@@ -76,21 +39,22 @@ if $highlight_theme == 'pale night'
   }
   $highlight-scrollbar = darken($highlight-background, 6)
 
+  if $highlighEnable
+    $highlight-comment = #676E95
+    $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 == 'ocean'
   $highlight-background = #0F111A
-  $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
-  $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
@@ -101,32 +65,45 @@ 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-comment = rgba(149, 165, 166, .8)
-  $highlight-red = #E53935
-  $highlight-orange = #F76D47
-  $highlight-yellow = #FFB62C
-  $highlight-green = #91B859
-  $highlight-aqua = #39ADB5
-  $highlight-blue = #6182B8
-  $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-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
+    $highlight-yellow = #FFB62C
+    $highlight-green = #91B859
+    $highlight-aqua = #39ADB5
+    $highlight-blue = #6182B8
+    $highlight-purple = #7C4DFF
+    $highlight-deletion = #BF42BF
+    $highlight-addition = #105EDE
+
 if $highlight_theme == false
   $highlight-background = #F6F8FA
   $highlight-foreground = #90A4AE
diff --git a/source/css/_layout/third-party.styl b/source/css/_layout/third-party.styl
index 9a58ff5..7a3014a 100644
--- a/source/css/_layout/third-party.styl
+++ b/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
-  outline: 0
-  line-height: 2
+  padding-bottom: .3rem
 
 .aplayer
   color: $font-black
diff --git a/source/css/_mode/darkmode.styl b/source/css/_mode/darkmode.styl
index 2946c74..2c1ca6d 100644
--- a/source/css/_mode/darkmode.styl
+++ b/source/css/_mode/darkmode.styl
@@ -44,8 +44,12 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
     #page-header
       background-color: #121212
 
-    #article-container code
-      background: #2c2c2c
+    #article-container 
+      code
+        background: #2c2c2c
+
+      pre > code 
+        background: 0
 
     // 頭部
     #page-header
@@ -73,16 +77,20 @@ 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)
 
-        table::-webkit-scrollbar-thumb
+          .line:before
+            color: alpha(#FFFFFF, .6) !important
+
+          .hljs
+            background-color: lighten(#121212, 2) !important
+        
+        pre[class*='language-']::-webkit-scrollbar-thumb
           background: lighten(#121212, 5)
 
-        .line:before
-          color: alpha(#FFFFFF, .6) !important
-
-        .hljs
-          background-color: lighten(#121212, 2) !important
-
         .highlight-tools
           background: lighten(#121212, 3) !important
           color: #90a4ae !important
diff --git a/source/css/var.styl b/source/css/var.styl
index 5b2832f..57a94d6 100644
--- a/source/css/var.styl
+++ b/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