refactor: refactor code block and add collapse (#85, #171)

_config.yml

@@ -141,9 +141,10 @@ post:
     custom_label_list: ["Trainee", "Engineer", "Architect"]
 
 # ---------------------------------------------------------------------------------------
-# Code copy
+# Code block tools
+# Support code copy and code block collapse
 # ---------------------------------------------------------------------------------------
-code_copy:
+code_block_tools:
   enable: false     # Option values: true | false
   style: default    # Option values: default | mac
 

layout/_partial/scripts.ejs

@@ -6,20 +6,31 @@
     'js/dark-light-toggle.js'
 ]) %>
 
-<% if (theme.local_search.enable) { %>
+<%
+const {
+    local_search: t_local_search,
+    code_copy: t_code_copy,
+    code_block_tools: t_code_block_tools,
+    lazyload: t_lazyload,
+    toc: t_toc,
+    pjax: t_pjax
+} = theme
+%>
+
+<% if (t_local_search?.enable === true) { %>
     <%- __js('js/local-search.js') %>
 <% } %>
 
-<% if (theme.code_copy.enable) { %>
+<% if (t_code_block_tools.enable === true || t_code_copy.enable === true) { %>
-    <%- __js('js/code-copy.js') %>
+    <%- __js('js/code-block-tools.js') %>
 <% } %>
 
-<% if (theme.lazyload.enable) { %>
+<% if (t_lazyload?.enable === true) { %>
     <%- __js('js/lazyload.js') %>
 <% } %>
 
-<div class="post-scripts<%= theme.pjax.enable === true ? ' pjax' : '' %>">
+<div class="post-scripts<%= theme.pjax?.enable === true ? ' pjax' : '' %>">
-    <% if (theme.toc.enable && is_post()) { %>
+    <% if (t_toc?.enable === true && is_post()) { %>
         <%- __js([
             'js/left-side-toggle.js',
             'js/libs/anime.min.js',
@@ -28,6 +39,6 @@
     <% } %>
 </div>
 
-<% if (theme.pjax.enable === true) { %>
+<% if (t_pjax?.enable === true) { %>
     <%- partial('pjax/pjax') %>
 <% } %>

scripts/helpers/export-config.js

@@ -37,13 +37,14 @@ hexo.extend.helper.register('export_config', function () {
   }
 
   let theme_config = {
-    toc: theme.toc,
+    toc: theme.toc || {},
-    style: theme.style,
+    style: theme.style || {},
-    local_search: theme.local_search,
+    local_search: theme.local_search || {},
-    code_copy: theme.code_copy,
+    code_copy: theme.code_copy || {},
-    side_tools: theme.side_tools,
+    code_block_tools: theme.code_block_tools || {},
-    pjax: theme.pjax,
+    side_tools: theme.side_tools || {},
-    lazyload: theme.lazyload,
+    pjax: theme.pjax || {},
+    lazyload: theme.lazyload || {},
     version: theme.version
   }
 

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

@@ -0,0 +1,135 @@
+disable-user-select() {
+  -moz-user-select none
+  -ms-user-select none
+  -webkit-user-select none
+  user-select none
+}
+
+.highlight-container {
+  position relative
+  box-sizing border-box
+  margin 1.4rem 0
+  overflow hidden
+
+  .code-tools-box {
+    box-sizing border-box
+    width 100%
+    background var(--fourth-text-color)
+    border-top-left-radius 0.3rem
+    border-top-right-radius 0.3rem
+    display flex
+    justify-content space-between
+    align-items center
+    padding 0.3rem 0.6rem 0.3rem 0.4rem
+
+    &.folded {
+      border-bottom-left-radius 0.3rem
+      border-bottom-right-radius 0.3rem
+    }
+
+    .code-lang {
+      margin-left 0.2rem
+      font-size 0.9rem
+      font-weight 600
+      font-family "Source Code Pro", consolas, Menlo
+      color var(--default-text-color)
+      justify-content flex-start
+    }
+
+    .tool {
+      disable-user-select()
+      cursor pointer
+
+      i {
+        color var(--second-text-color)
+        font-size 0.8rem
+      }
+    }
+
+
+    .fold {
+      font-weight bold
+      padding 0.1rem 0.4rem 0.1rem 0.2rem
+    }
+
+  }
+
+
+  figure.highlight {
+    margin 0
+
+    &.folded {
+      height 0
+    }
+  }
+
+
+  if (hexo-config('code_block_tools.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, .4)
+
+    &:hover {
+      .code-tools-box .copy {
+        opacity 1
+      }
+    }
+
+    .code-tools-box {
+      justify-content flex-end
+      background #21252b
+      padding 0.4rem 0.6rem 0.7rem 0.4rem
+
+      &::before {
+        position absolute
+        content ''
+        width 0.8rem
+        height 0.8rem
+        left 0.8rem
+        background #fc625d
+        border-radius 50%
+        box-shadow 1.4rem 0 #fdbc40, 2.8rem 0 #35cd4b
+      }
+
+      &.folded {
+        border-bottom-left-radius 0
+        border-bottom-right-radius 0
+
+        .copy {
+          display none
+        }
+      }
+
+      .code-lang {
+        order 1
+        color #bbb
+      }
+
+      .fold {
+        order 2
+        padding 0.1rem 0.1rem 0.1rem 0.6rem
+        i {
+          color #ccc
+        }
+      }
+
+
+      .copy {
+        position absolute
+        bottom 0
+        right 0
+        padding 0.4rem 0.5rem
+        font-weight bold
+        opacity 0
+        transition-t("opacity", "0", "0.2", "ease-in-out")
+
+        i {
+          font-size 1rem
+        }
+
+      }
+
+    }
+
+  }
+
+}

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

@@ -35,44 +35,44 @@ $night-highlight-deletion = #008000
 $night-highlight-addition = #800000
 
 code-theme(mode) {
-  --code-foreground: mode == 'light' ? $code-foreground : $night-code-foreground;
+  --code-foreground: mode == 'light' ? $code-foreground : $night-code-foreground
-  --code-background: mode == 'light' ? $code-background : $night-code-background;
+  --code-background: mode == 'light' ? $code-background : $night-code-background
-  --highlight-background: mode == 'light' ? $highlight-background : $night-highlight-background;
+  --highlight-background: mode == 'light' ? $highlight-background : $night-highlight-background
-  --highlight-foreground: mode == 'light' ? $highlight-foreground : $night-highlight-foreground;
+  --highlight-foreground: mode == 'light' ? $highlight-foreground : $night-highlight-foreground
-  --highlight-comment: mode == 'light' ? $highlight-comment : $night-highlight-comment;
+  --highlight-comment: mode == 'light' ? $highlight-comment : $night-highlight-comment
-  --highlight-red: mode == 'light' ? $highlight-red : $night-highlight-red;
+  --highlight-red: mode == 'light' ? $highlight-red : $night-highlight-red
-  --highlight-orange: mode == 'light' ? $highlight-orange : $night-highlight-orange;
+  --highlight-orange: mode == 'light' ? $highlight-orange : $night-highlight-orange
-  --highlight-yellow: mode == 'light' ? $highlight-yellow : $night-highlight-yellow;
+  --highlight-yellow: mode == 'light' ? $highlight-yellow : $night-highlight-yellow
-  --highlight-green: mode == 'light' ? $highlight-green : $night-highlight-green;
+  --highlight-green: mode == 'light' ? $highlight-green : $night-highlight-green
-  --highlight-aqua: mode == 'light' ? $highlight-aqua : $night-highlight-aqua;
+  --highlight-aqua: mode == 'light' ? $highlight-aqua : $night-highlight-aqua
-  --highlight-blue: mode == 'light' ? $highlight-blue : $night-highlight-blue;
+  --highlight-blue: mode == 'light' ? $highlight-blue : $night-highlight-blue
-  --highlight-purple: mode == 'light' ? $highlight-purple : $night-highlight-purple;
+  --highlight-purple: mode == 'light' ? $highlight-purple : $night-highlight-purple
-  --highlight-gutter-color: mode == 'light' ? $highlight-gutter-color : $night-highlight-gutter-color;
+  --highlight-gutter-color: mode == 'light' ? $highlight-gutter-color : $night-highlight-gutter-color
-  --highlight-gutter-bg-color: mode == 'light' ? $highlight-gutter-bg-color : $night-highlight-gutter-bg-color;
+  --highlight-gutter-bg-color: mode == 'light' ? $highlight-gutter-bg-color : $night-highlight-gutter-bg-color
 }
 
 
 :root {
-  code-theme('light');
+  code-theme('light')
 }
 
 @media (prefers-color-scheme: light) {
   :root {
-    code-theme('light');
+    code-theme('light')
   }
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    code-theme('dark');
+    code-theme('dark')
   }
 }
 
 .light-mode {
-  code-theme('light');
+  code-theme('light')
 }
 
 .dark-mode {
-  code-theme('dark');
+  code-theme('dark')
 }
 

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

@@ -0,0 +1,204 @@
+@require "code-theme.styl"
+
+$code-block {
+  overflow auto
+  margin 20px 0
+  padding 0
+  font-size 0.96rem
+  line-height 1.5rem
+  color var(--highlight-foreground)
+  background var(--highlight-background)
+}
+
+
+pre, code {
+  font-family "Source Code Pro", consolas, Menlo
+}
+
+code {
+  padding 5px
+  word-wrap break-word
+  border-radius 2px
+  font-size 0.96rem
+  color var(--code-foreground)
+  background var(--code-background)
+}
+
+pre {
+  @extend $code-block
+  padding 10px
+
+  code {
+    padding 0
+    color var(--highlight-foreground)
+    background none
+    text-shadow none
+  }
+}
+
+.highlight {
+  @extend $code-block
+  border-radius 1px
+
+  pre {
+    border none
+    margin 0
+    padding 10px 0
+  }
+
+
+  table {
+    margin 0
+    width auto
+    border none
+    border-spacing unset
+  }
+
+
+  td {
+    border none
+    padding 0
+  }
+
+  figcaption {
+    font-size 1rem
+    color var(--highlight-foreground)
+    line-height 1rem
+    margin-bottom 1rem
+
+    a {
+      float right
+      color var(--highlight-foreground)
+
+      &:hover {
+        border-bottom-color var(--highlight-foreground)
+      }
+    }
+  }
+
+  .gutter pre {
+    padding-left 10px
+    padding-right 10px
+    color var(--highlight-gutter-color)
+    text-align center
+    background-color var(--highlight-gutter-bg-color)
+  }
+
+  .code pre {
+    width 100%
+    padding-left 10px
+    padding-right 10px
+    background-color var(--highlight-background)
+  }
+
+  .line {
+    height 20px
+    color var(--default-text-color)
+
+    .attr {
+      color var(--default-text-color)
+    }
+
+    .string {
+      color var(--default-text-color)
+    }
+
+  }
+}
+
+
+.gutter {
+  -webkit-user-select none
+  -moz-user-select none
+  -ms-user-select none
+  user-select none
+}
+
+.gist table {
+  width auto
+
+  td {
+    border none
+  }
+}
+
+// For diff highlight
+pre .deletion {
+  background var(--highlight-deletion)
+}
+
+pre .addition {
+  background var(--highlight-addition)
+}
+
+pre .meta {
+  color var(--highlight-purple)
+}
+
+pre {
+
+  .comment {
+    color var(--highlight-comment)
+  }
+
+  .variable
+  .attribute
+  .tag
+  .regexp
+  .ruby .constant
+  .xml .tag .title
+  .xml .pi
+  .xml .doctype
+  .html .doctype
+  .css .id
+  .css .class
+  .css .pseudo {
+    color var(--highlight-red)
+  }
+
+  .number
+  .preprocessor
+  .built_in
+  .literal
+  .params
+  .constant
+  .command {
+    color var(--highlight-orange)
+  }
+
+  .ruby .class .title
+  .css .rules .attribute
+  .string
+  .value
+  .inheritance
+  .header
+  .ruby .symbol
+  .xml .cdata
+  .special
+  .number
+  .formula {
+    color var(--highlight-green)
+  }
+
+  .title
+  .css .hexcolor {
+    color var(--highlight-aqua)
+  }
+
+  .function
+  .python .decorator
+  .python .title
+  .ruby .function .title
+  .ruby .title .keyword
+  .perl .sub
+  .javascript .title
+  .coffeescript .title {
+    color var(--highlight-blue)
+  }
+
+  .keyword
+  .javascript .function {
+    color var(--highlight-purple)
+  }
+
+}

source/css/common/codeblock/copy-code.styl

@@ -1,66 +0,0 @@
-disable-user-select() {
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-.highlight-container {
-  position: relative;
-}
-
-.highlight-container:hover .copy-btn, .highlight-container .copy-btn:focus {
-  opacity: 1;
-}
-
-.copy-btn {
-  cursor: pointer;
-  display: inline-block;
-  font-weight: bold;
-  line-height: 1.8;
-  opacity: 0;
-  outline: 0;
-  padding: 2px 6px;
-  position: absolute;
-  vertical-align: middle;
-  white-space: nowrap;
-  font-size: 1rem;
-  color: var(--default-text-color);
-  disable-user-select();
-  transition-t("opacity", "0", "0.2", "ease-in-out");
-
-
-  if (hexo-config('code_copy.style') == 'mac') {
-    color: white;
-    right: 2px;
-    top: 2px;
-  } else {
-    background: var(--background-color);
-    border: 0;
-    right: 0;
-    top: 0;
-  }
-}
-
-
-if (hexo-config('code_copy.style') == 'mac') {
-  .highlight-container {
-    background: #21252b;
-    border-radius: 5px;
-    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4);
-    padding-top: 20px;
-    margin-top: 10px;
-
-    &::before {
-      background: #fc625d;
-      border-radius: 50%;
-      box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
-      content: ' ';
-      height: 12px;
-      left: 12px;
-      margin-top: -10px;
-      position: absolute;
-      width: 12px;
-    }
-  }
-}

source/css/common/codeblock/highlight.styl

@@ -1,204 +0,0 @@
-@require "code-theme.styl"
-
-$code-block {
-  overflow: auto;
-  margin: 20px 0;
-  padding: 0;
-  font-size 0.96rem;
-  line-height: 1.5rem;
-  color: var(--highlight-foreground);
-  background: var(--highlight-background);
-}
-
-
-pre, code {
-  font-family: "Source Code Pro", consolas, Menlo;
-}
-
-code {
-  padding: 5px;
-  word-wrap: break-word;
-  border-radius: 2px;
-  font-size: 0.96rem;
-  color: var(--code-foreground);
-  background: var(--code-background);
-}
-
-pre {
-  @extend $code-block;
-  padding: 10px;
-
-  code {
-    padding: 0;
-    color: var(--highlight-foreground);
-    background: none;
-    text-shadow: none;
-  }
-}
-
-.highlight {
-  @extend $code-block;
-  border-radius: 1px;
-
-  pre {
-    border: none;
-    margin: 0;
-    padding: 10px 0;
-  }
-
-
-  table {
-    margin: 0;
-    width: auto;
-    border: none;
-    border-spacing: unset;
-  }
-
-
-  td {
-    border: none;
-    padding: 0;
-  }
-
-  figcaption {
-    font-size: 1rem;
-    color: var(--highlight-foreground);
-    line-height: 1rem;
-    margin-bottom: 1rem;
-
-    a {
-      float: right;
-      color: var(--highlight-foreground);
-
-      &:hover {
-        border-bottom-color: var(--highlight-foreground);
-      }
-    }
-  }
-
-  .gutter pre {
-    padding-left: 10px;
-    padding-right: 10px;
-    color: var(--highlight-gutter-color);
-    text-align: center;
-    background-color: var(--highlight-gutter-bg-color);
-  }
-
-  .code pre {
-    width: 100%;
-    padding-left: 10px;
-    padding-right: 10px;
-    background-color: var(--highlight-background);
-  }
-
-  .line {
-    height: 20px;
-    color: var(--default-text-color);
-
-    .attr {
-      color: var(--default-text-color);
-    }
-
-    .string {
-      color: var(--default-text-color);
-    }
-
-  }
-}
-
-
-.gutter {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.gist table {
-  width: auto;
-
-  td {
-    border: none;
-  }
-}
-
-// For diff highlight
-pre .deletion {
-  background: var(--highlight-deletion);
-}
-
-pre .addition {
-  background: var(--highlight-addition);
-}
-
-pre .meta {
-  color: var(--highlight-purple);
-}
-
-pre {
-
-  .comment {
-    color: var(--highlight-comment);
-  }
-
-  .variable
-  .attribute
-  .tag
-  .regexp
-  .ruby .constant
-  .xml .tag .title
-  .xml .pi
-  .xml .doctype
-  .html .doctype
-  .css .id
-  .css .class
-  .css .pseudo {
-    color: var(--highlight-red);
-  }
-
-  .number
-  .preprocessor
-  .built_in
-  .literal
-  .params
-  .constant
-  .command {
-    color: var(--highlight-orange);
-  }
-
-  .ruby .class .title
-  .css .rules .attribute
-  .string
-  .value
-  .inheritance
-  .header
-  .ruby .symbol
-  .xml .cdata
-  .special
-  .number
-  .formula {
-    color: var(--highlight-green);
-  }
-
-  .title
-  .css .hexcolor {
-    color: var(--highlight-aqua);
-  }
-
-  .function
-  .python .decorator
-  .python .title
-  .ruby .function .title
-  .ruby .title .keyword
-  .perl .sub
-  .javascript .title
-  .coffeescript .title {
-    color: var(--highlight-blue);
-  }
-
-  .keyword
-  .javascript .function {
-    color: var(--highlight-purple);
-  }
-
-}

source/css/common/variables.styl

@@ -90,7 +90,7 @@ $dark-default-text-color = #bebec6;
 $dark-first-text-color = lighten($dark-default-text-color, 30%);
 $dark-second-text-color = lighten($dark-default-text-color, 20%);
 $dark-third-text-color = darken($dark-default-text-color, 20%);
-$dark-fourth-text-color = darken($dark-default-text-color, 80%);
+$dark-fourth-text-color = darken($dark-default-text-color, 75%);
 $dark-border-color = lighten($dark-background-color, 20%);
 $dark-selection-color = $selection-color;
 $dark-shadow-color = rgba(128, 128, 128, 0.2);

source/css/layout/_partial/article-meta-info.styl

@@ -1,9 +1,9 @@
 .article-meta-info {
   font-size: 0.8rem;
-  color: var(--third-text-color);
 
   .article-meta-item {
     margin-right: 10px;
+    color: var(--third-text-color);
 
     &:last-child {
       margin-right: 0;

source/css/style.styl

@@ -1,8 +1,8 @@
 @import "common/basic.styl"
 @import "common/markdown.styl"
-@import "common/codeblock/highlight.styl"
+@import "common/code-block/highlight.styl"
-@import "common/codeblock/copy-code.styl"
+@import "common/code-block/code-block-tools.styl"
-@import "common/codeblock/code-theme.styl"
+@import "common/code-block/code-theme.styl"
 @import "layout/page.styl"
 @import "layout/_partial/local-search.styl"
 @import "layout/_partial/toc.styl"

source/js/code-block-tools.js

@@ -0,0 +1,85 @@
+/* global KEEP */
+
+KEEP.initCodeBlockTools = () => {
+  HTMLElement.prototype.wrap = function (wrapper) {
+    this.parentNode.insertBefore(wrapper, this);
+    this.parentNode.removeChild(this);
+    wrapper.appendChild(this);
+  };
+
+  const { style: codeCopyStyle } = KEEP.theme_config?.code_copy;
+  const { style: codeBlockStyle } = KEEP.theme_config?.code_block_tools;
+  const isMac = (codeBlockStyle || codeCopyStyle || 'default') === 'mac';
+  const foldedIconClassName = isMac ? 'fas fa-chevron-left' : 'fas fa-chevron-right';
+
+  const foldDom = `<span class="tool fold"><i class="fas fa-chevron-down"></i></span>`
+
+  document.querySelectorAll('figure.highlight').forEach(element => {
+    let codeLang = element.classList.length ? element.classList[1].toUpperCase() : '';
+    if (codeLang === 'PLAINTEXT') { codeLang = '' }
+    const highlightContainer = document.createElement('div');
+    highlightContainer.classList.add('highlight-container');
+    element.wrap(highlightContainer);
+
+    const codeLangDom = `${codeLang ? '<span class="code-lang">' + codeLang + '</span>' : ''}`
+
+    highlightContainer.insertAdjacentHTML(
+      'afterbegin',
+      `<div class="code-tools-box">
+        ${isMac ? foldDom + codeLangDom : '<span>' + foldDom + codeLangDom + '</span>'}
+        <span class="tool copy"><i class="fas fa-copy"></i></span>
+      </div>`
+    );
+    const codeToolsBox = element.parentNode.querySelector('.code-tools-box');
+    const copyDom = codeToolsBox.querySelector('.copy');
+    const targetFoldDom = codeToolsBox.querySelector('.fold');
+
+    copyDom.addEventListener('click', event => {
+      const target = event.currentTarget;
+      const code = [...element.querySelectorAll('.code .line')].map(line => line.innerText).join('\n');
+      const tta = document.createElement('textarea');
+      tta.style.top = window.scrollY + 'px';
+      tta.style.position = 'absolute';
+      tta.style.opacity = '0';
+      tta.readOnly = true;
+      tta.value = code;
+      document.body.append(tta);
+      const selection = document.getSelection();
+      const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false;
+      tta.select();
+      tta.setSelectionRange(0, code.length);
+      tta.readOnly = false;
+      const result = document.execCommand('copy');
+      target.querySelector('i').className = result ? 'fas fa-check' : 'fas fa-times';
+      tta.blur();
+      target.blur();
+      if (selected) {
+        selection.removeAllRanges();
+        selection.addRange(selected);
+      }
+      document.body.removeChild(tta);
+    });
+
+    copyDom.addEventListener('mouseleave', event => {
+      setTimeout(() => {
+        event.target.querySelector('i').className = 'fas fa-copy';
+      }, 500);
+    });
+
+    let isFold = false
+    targetFoldDom.addEventListener('click', event => {
+      const target = event.currentTarget;
+      const icon = target.querySelector('i');
+      isFold = !isFold
+      if (isFold) {
+        icon.className = foldedIconClassName
+        element.classList.add('folded');
+        codeToolsBox.classList.add('folded');
+      } else {
+        icon.className = 'fas fa-chevron-down';
+        element.classList.remove('folded');
+        codeToolsBox.classList.remove('folded');
+      }
+    });
+  });
+}

source/js/code-copy.js

@@ -1,46 +0,0 @@
-KEEP.initCodeCopy = () => {
-
-  HTMLElement.prototype.wrap = function (wrapper) {
-    this.parentNode.insertBefore(wrapper, this);
-    this.parentNode.removeChild(this);
-    wrapper.appendChild(this);
-  };
-
-  document.querySelectorAll('figure.highlight').forEach(element => {
-    const box = document.createElement('div');
-    element.wrap(box);
-    box.classList.add('highlight-container');
-    box.insertAdjacentHTML('beforeend', '<div class="copy-btn"><i class="fas fa-copy"></i></div>');
-    const button = element.parentNode.querySelector('.copy-btn');
-    button.addEventListener('click', event => {
-      const target = event.currentTarget;
-      const code = [...target.parentNode.querySelectorAll('.code .line')].map(line => line.innerText).join('\n');
-      const ta = document.createElement('textarea');
-      ta.style.top = window.scrollY + 'px'; // Prevent page scrolling
-      ta.style.position = 'absolute';
-      ta.style.opacity = '0';
-      ta.readOnly = true;
-      ta.value = code;
-      document.body.append(ta);
-      const selection = document.getSelection();
-      const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false;
-      ta.select();
-      ta.setSelectionRange(0, code.length);
-      ta.readOnly = false;
-      const result = document.execCommand('copy');
-      target.querySelector('i').className = result ? 'fas fa-check' : 'fas fa-times';
-      ta.blur(); // For iOS
-      target.blur();
-      if (selected) {
-        selection.removeAllRanges();
-        selection.addRange(selected);
-      }
-      document.body.removeChild(ta);
-    });
-    button.addEventListener('mouseleave', event => {
-      setTimeout(() => {
-        event.target.querySelector('i').className = 'fas fa-copy';
-      }, 300);
-    });
-  });
-}

source/js/main.js

@@ -50,15 +50,18 @@ window.addEventListener('DOMContentLoaded', () => {
     KEEP.initModeToggle();
     KEEP.initBack2Top();
 
-    if (KEEP.theme_config.local_search.enable === true) {
+    if (KEEP.theme_config.local_search?.enable === true) {
       KEEP.initLocalSearch();
     }
 
-    if (KEEP.theme_config.code_copy.enable === true) {
+    if (
-      KEEP.initCodeCopy();
+      KEEP.theme_config.code_block_tools?.enable === true
+      || KEEP.theme_config.code_copy?.enable === true
+    ) {
+      KEEP.initCodeBlockTools();
     }
 
-    if (KEEP.theme_config.lazyload.enable === true) {
+    if (KEEP.theme_config.lazyload?.enable === true) {
       KEEP.initLazyLoad();
     }
   }