diff --git a/_config.yml b/_config.yml index f703b64..174267a 100644 --- a/_config.yml +++ b/_config.yml @@ -157,8 +157,9 @@ post: # Support code copy and code block collapse # --------------------------------------------------------------------------------------- code_block: - enable: false # Option values: true | false - style: default # Option values: default | mac + tools: # Include "code copy", "code block collapse" and "code language" + enable: false # Option values: true | false + style: default # Option values: default | mac highlight_theme: default # Option values: default | obsidian # --------------------------------------------------------------------------------------- diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs index 638cf95..eb02023 100644 --- a/layout/_partial/scripts.ejs +++ b/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') %> <% } %> diff --git a/source/css/common/code-block/code-block.styl b/source/css/common/code-block/code-block.styl index d74fa78..feba4d1 100644 --- a/source/css/common/code-block/code-block.styl +++ b/source/css/common/code-block/code-block.styl @@ -3,60 +3,7 @@ box-sizing border-box margin 1.4rem 0 - .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 - } - } - - - if (hexo-config('code_block.style') == 'mac' || hexo-config('code_copy.style') == 'mac') { + &.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 + } + } + } diff --git a/source/css/common/code-block/code-theme.styl b/source/css/common/code-block/code-theme.styl index 121515f..8f13edc 100644 --- a/source/css/common/code-block/code-theme.styl +++ b/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 diff --git a/source/js/code-block.js b/source/js/code-block.js index 7c679d7..43ab7ba 100644 --- a/source/js/code-block.js +++ b/source/js/code-block.js @@ -7,9 +7,11 @@ KEEP.initCodeBlockTools = () => { wrapper.appendChild(this) } - const { style: codeCopyStyle } = KEEP.theme_config?.code_copy - const { style: codeBlockStyle } = KEEP.theme_config?.code_block - const isMac = (codeBlockStyle || codeCopyStyle || 'default') === 'mac' + const {style: codeCopyStyle} = KEEP.theme_config?.code_copy || {} + const {style: codeBlockStyle} = KEEP.theme_config?.code_block || {} + 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 ? '' + codeLang + '' : ''}` diff --git a/source/js/main.js b/source/js/main.js index c1c6b00..cf271e5 100644 --- a/source/js/main.js +++ b/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() }