build: update code block configuration items

_config.yml

@@ -157,8 +157,9 @@ post:
 # Support code copy and code block collapse
 # ---------------------------------------------------------------------------------------
 code_block:
-  enable: false     # Option values: true | false
+  tools:  # Include "code copy", "code block collapse" and "code language"
-  style: default    # Option values: default | mac
+    enable: false # Option values: true | false
+    style: default # Option values: default | mac
   highlight_theme: default  # Option values: default | obsidian
 
 # ---------------------------------------------------------------------------------------

layout/_partial/scripts.ejs

@@ -21,7 +21,7 @@ const {
     <%- __js('js/local-search.js') %>
 <% } %>
 
-<% if (t_code_block?.enable === true || t_code_copy?.enable === true) { %>
+<% if (t_code_copy?.enable === true || t_code_block?.enable === true || t_code_block?.tools?.enable === true) { %>
     <%- __js('js/code-block.js') %>
 <% } %>
 

source/css/common/code-block/code-block.styl

@@ -3,60 +3,7 @@
   box-sizing border-box
   margin 1.4rem 0
 
-  .code-tools-box {
+  &.mac {
-    display flex
-    align-items center
-    justify-content space-between
-    box-sizing border-box
-    width 100%
-    padding 0.3rem 0.4rem
-    color var(--toolbar-foreground)
-    background var(--toolbar-background)
-    border-top-left-radius 0.3rem
-    border-top-right-radius 0.3rem
-
-
-    &.folded {
-      border-bottom-right-radius 0.3rem
-      border-bottom-left-radius 0.3rem
-    }
-
-
-    .code-lang {
-      justify-content flex-start
-      margin-left 0.2rem
-      font-weight 600
-      font-size 0.9rem
-      font-family "Source Code Pro", consolas, Menlo
-    }
-
-
-    .tool {
-      disable-user-select()
-      cursor pointer
-
-      i {
-        font-size 0.8rem
-      }
-    }
-
-
-    .fold {
-      padding 0 0.4rem 0 0.2rem
-    }
-  }
-
-
-  figure.highlight {
-    margin 0
-
-    &.folded {
-      height 0
-    }
-  }
-
-
-  if (hexo-config('code_block.style') == 'mac' || hexo-config('code_copy.style') == 'mac') {
     margin 1.4rem 0 1.8rem 0
     box-shadow 0 0.8rem 2rem 0 rgba(0, 0, 0, 0.4)
 
@@ -124,4 +71,58 @@
       }
     }
   }
+
+
+  .code-tools-box {
+    display flex
+    align-items center
+    justify-content space-between
+    box-sizing border-box
+    width 100%
+    padding 0.3rem 0.4rem
+    color var(--toolbar-foreground)
+    background var(--toolbar-background)
+    border-top-left-radius 0.3rem
+    border-top-right-radius 0.3rem
+
+
+    &.folded {
+      border-bottom-right-radius 0.3rem
+      border-bottom-left-radius 0.3rem
+    }
+
+
+    .code-lang {
+      justify-content flex-start
+      margin-left 0.2rem
+      font-weight 600
+      font-size 0.9rem
+      font-family "Source Code Pro", consolas, Menlo
+    }
+
+
+    .tool {
+      disable-user-select()
+      cursor pointer
+
+      i {
+        font-size 0.8rem
+      }
+    }
+
+
+    .fold {
+      padding 0 0.4rem 0 0.2rem
+    }
+  }
+
+
+  figure.highlight {
+    margin 0
+
+    &.folded {
+      height 0
+    }
+  }
+
 }

source/css/common/code-block/code-theme.styl

@@ -10,7 +10,7 @@ $dark-code-background = darken($dark-background-color-1, 10%)
 if (hexo-config('code_block.highlight_theme') == 'obsidian') {
   $toolbar-foreground = #b5b5b5
   $toolbar-background = #3a3f40
-  $highlight-foreground = #e8e2bb
+  $highlight-foreground = #faf5d6
   $highlight-background = #273036
   $highlight-gutter-color = #7a979a
   $highlight-gutter-bg-color = #273130

source/js/code-block.js

@@ -7,9 +7,11 @@ KEEP.initCodeBlockTools = () => {
     wrapper.appendChild(this)
   }
 
-  const { style: codeCopyStyle } = KEEP.theme_config?.code_copy
+  const {style: codeCopyStyle} = KEEP.theme_config?.code_copy || {}
-  const { style: codeBlockStyle } = KEEP.theme_config?.code_block
+  const {style: codeBlockStyle} = KEEP.theme_config?.code_block || {}
-  const isMac = (codeBlockStyle || codeCopyStyle || 'default') === 'mac'
+  const {style: codeBlockToolsStyle} = KEEP.theme_config?.code_block?.tools || {}
+
+  const isMac = (codeCopyStyle || codeBlockStyle || codeBlockToolsStyle || 'default') === 'mac'
   const foldedIconClassName = isMac ? 'fas fa-chevron-left' : 'fas fa-chevron-right'
   const {
     copy: copyLang,
@@ -26,6 +28,9 @@ KEEP.initCodeBlockTools = () => {
     }
     const highlightContainer = document.createElement('div')
     highlightContainer.classList.add('highlight-container')
+    if (isMac) {
+      highlightContainer.classList.add('mac')
+    }
     element.wrap(highlightContainer)
 
     const codeLangDom = `${codeLang ? '<span class="code-lang">' + codeLang + '</span>' : ''}`

source/js/main.js

@@ -56,7 +56,7 @@ window.addEventListener('DOMContentLoaded', () => {
       KEEP.initLocalSearch()
     }
 
-    if (code_block?.enable === true || code_copy?.enable === true) {
+    if (code_block?.tools?.enable === true || code_block?.enable === true || code_copy?.enable === true) {
       KEEP.initCodeBlockTools()
     }