diff --git a/_config.yml b/_config.yml
index d683e3b..ea94eab 100644
--- a/_config.yml
+++ b/_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
diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs
index 1c71a8f..c07da5e 100644
--- a/layout/_partial/scripts.ejs
+++ b/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) { %>
- <%- __js('js/code-copy.js') %>
+<% if (t_code_block_tools.enable === true || t_code_copy.enable === true) { %>
+ <%- __js('js/code-block-tools.js') %>
<% } %>
-<% if (theme.lazyload.enable) { %>
+<% if (t_lazyload?.enable === true) { %>
<%- __js('js/lazyload.js') %>
<% } %>
-
- <% 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 @@
<% } %>
-<% if (theme.pjax.enable === true) { %>
+<% if (t_pjax?.enable === true) { %>
<%- partial('pjax/pjax') %>
<% } %>
diff --git a/scripts/helpers/export-config.js b/scripts/helpers/export-config.js
index a728df5..b901f23 100644
--- a/scripts/helpers/export-config.js
+++ b/scripts/helpers/export-config.js
@@ -37,13 +37,14 @@ hexo.extend.helper.register('export_config', function () {
}
let theme_config = {
- toc: theme.toc,
- style: theme.style,
- local_search: theme.local_search,
- code_copy: theme.code_copy,
- side_tools: theme.side_tools,
- pjax: theme.pjax,
- lazyload: theme.lazyload,
+ toc: theme.toc || {},
+ style: theme.style || {},
+ local_search: theme.local_search || {},
+ code_copy: theme.code_copy || {},
+ code_block_tools: theme.code_block_tools || {},
+ side_tools: theme.side_tools || {},
+ pjax: theme.pjax || {},
+ lazyload: theme.lazyload || {},
version: theme.version
}
diff --git a/source/css/common/code-block/code-block-tools.styl b/source/css/common/code-block/code-block-tools.styl
new file mode 100644
index 0000000..5730553
--- /dev/null
+++ b/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
+ }
+
+ }
+
+ }
+
+ }
+
+}
diff --git a/source/css/common/codeblock/code-theme.styl b/source/css/common/code-block/code-theme.styl
similarity index 84%
rename from source/css/common/codeblock/code-theme.styl
rename to source/css/common/code-block/code-theme.styl
index dc02ffc..20c3715 100644
--- a/source/css/common/codeblock/code-theme.styl
+++ b/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-background: mode == 'light' ? $code-background : $night-code-background;
- --highlight-background: mode == 'light' ? $highlight-background : $night-highlight-background;
- --highlight-foreground: mode == 'light' ? $highlight-foreground : $night-highlight-foreground;
- --highlight-comment: mode == 'light' ? $highlight-comment : $night-highlight-comment;
- --highlight-red: mode == 'light' ? $highlight-red : $night-highlight-red;
- --highlight-orange: mode == 'light' ? $highlight-orange : $night-highlight-orange;
- --highlight-yellow: mode == 'light' ? $highlight-yellow : $night-highlight-yellow;
- --highlight-green: mode == 'light' ? $highlight-green : $night-highlight-green;
- --highlight-aqua: mode == 'light' ? $highlight-aqua : $night-highlight-aqua;
- --highlight-blue: mode == 'light' ? $highlight-blue : $night-highlight-blue;
- --highlight-purple: mode == 'light' ? $highlight-purple : $night-highlight-purple;
- --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;
+ --code-foreground: mode == 'light' ? $code-foreground : $night-code-foreground
+ --code-background: mode == 'light' ? $code-background : $night-code-background
+ --highlight-background: mode == 'light' ? $highlight-background : $night-highlight-background
+ --highlight-foreground: mode == 'light' ? $highlight-foreground : $night-highlight-foreground
+ --highlight-comment: mode == 'light' ? $highlight-comment : $night-highlight-comment
+ --highlight-red: mode == 'light' ? $highlight-red : $night-highlight-red
+ --highlight-orange: mode == 'light' ? $highlight-orange : $night-highlight-orange
+ --highlight-yellow: mode == 'light' ? $highlight-yellow : $night-highlight-yellow
+ --highlight-green: mode == 'light' ? $highlight-green : $night-highlight-green
+ --highlight-aqua: mode == 'light' ? $highlight-aqua : $night-highlight-aqua
+ --highlight-blue: mode == 'light' ? $highlight-blue : $night-highlight-blue
+ --highlight-purple: mode == 'light' ? $highlight-purple : $night-highlight-purple
+ --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
}
: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')
}
diff --git a/source/css/common/code-block/highlight.styl b/source/css/common/code-block/highlight.styl
new file mode 100644
index 0000000..19c09e3
--- /dev/null
+++ b/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)
+ }
+
+}
diff --git a/source/css/common/codeblock/copy-code.styl b/source/css/common/codeblock/copy-code.styl
deleted file mode 100644
index 89fb9dc..0000000
--- a/source/css/common/codeblock/copy-code.styl
+++ /dev/null
@@ -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;
- }
- }
-}
diff --git a/source/css/common/codeblock/highlight.styl b/source/css/common/codeblock/highlight.styl
deleted file mode 100644
index 2517bca..0000000
--- a/source/css/common/codeblock/highlight.styl
+++ /dev/null
@@ -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);
- }
-
-}
diff --git a/source/css/common/variables.styl b/source/css/common/variables.styl
index 6ea9621..d78dee1 100644
--- a/source/css/common/variables.styl
+++ b/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);
diff --git a/source/css/layout/_partial/article-meta-info.styl b/source/css/layout/_partial/article-meta-info.styl
index 9f7735c..dabd49d 100644
--- a/source/css/layout/_partial/article-meta-info.styl
+++ b/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;
diff --git a/source/css/style.styl b/source/css/style.styl
index dea0030..2f56545 100644
--- a/source/css/style.styl
+++ b/source/css/style.styl
@@ -1,8 +1,8 @@
@import "common/basic.styl"
@import "common/markdown.styl"
-@import "common/codeblock/highlight.styl"
-@import "common/codeblock/copy-code.styl"
-@import "common/codeblock/code-theme.styl"
+@import "common/code-block/highlight.styl"
+@import "common/code-block/code-block-tools.styl"
+@import "common/code-block/code-theme.styl"
@import "layout/page.styl"
@import "layout/_partial/local-search.styl"
@import "layout/_partial/toc.styl"
diff --git a/source/js/code-block-tools.js b/source/js/code-block-tools.js
new file mode 100644
index 0000000..88f13d2
--- /dev/null
+++ b/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 = `
`
+
+ 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 ? '
' + codeLang + '' : ''}`
+
+ highlightContainer.insertAdjacentHTML(
+ 'afterbegin',
+ `
+ ${isMac ? foldDom + codeLangDom : '' + foldDom + codeLangDom + ''}
+
+
`
+ );
+ 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');
+ }
+ });
+ });
+}
diff --git a/source/js/code-copy.js b/source/js/code-copy.js
deleted file mode 100644
index 9f528b4..0000000
--- a/source/js/code-copy.js
+++ /dev/null
@@ -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', '
');
- 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);
- });
- });
-}
diff --git a/source/js/main.js b/source/js/main.js
index 6453867..fd4dc6b 100644
--- a/source/js/main.js
+++ b/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) {
- KEEP.initCodeCopy();
+ if (
+ 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();
}
}