From e6fccb0b4ea8263038302d6f5afc2c41b0478edf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=A1=E6=A2=A6=E6=98=9F=E5=B0=98?= Date: Tue, 21 Jun 2022 14:55:07 +0800 Subject: [PATCH] :lipstick: :bug: Fixed the copy code button display style. --- .../scaffolding/highlight/copy-code.scss | 29 +++-- .../_common/scaffolding/highlight/index.scss | 120 +----------------- assets/css/main.scss | 8 +- assets/js/utils.js | 13 +- 4 files changed, 34 insertions(+), 136 deletions(-) diff --git a/assets/css/_common/scaffolding/highlight/copy-code.scss b/assets/css/_common/scaffolding/highlight/copy-code.scss index 0b28ff4..369854f 100644 --- a/assets/css/_common/scaffolding/highlight/copy-code.scss +++ b/assets/css/_common/scaffolding/highlight/copy-code.scss @@ -2,6 +2,19 @@ opacity: 1; } +.highlight { + + background: var(--highlight-background); + + .table-container, pre { + position: relative; + } + + .table-container table tbody tr { + background: none; + } +} + .copy-btn { color: $black-dim; cursor: pointer; @@ -9,32 +22,32 @@ opacity: 0; padding: 2px 6px; position: absolute; + right: 8px; + top: 4px; transition: opacity $transition-ease; + background: var(--highlight-background); @if $codeblock_copy_btn_style == 'flat' { background: white; border: 0; font-size: $font-size-smaller; - right: 0; - top: 0; + } @else if $codeblock_copy_btn_style == 'mac' { color: var(--highlight-foreground); font-size: 14px; - right: 0; - top: 2px; + border-radius: 3px; } @else { background-color: $gainsboro; background-image: linear-gradient(#fcfcfc, $gainsboro); border: 1px solid #d5d5d5; border-radius: 3px; font-size: $font-size-smaller; - right: 4px; - top: 8px; + } } @if $codeblock_copy_btn_style == 'mac' { - figure.highlight { + .highlight { border-radius: 5px; box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4); padding-top: 30px; @@ -46,8 +59,8 @@ &::before { background: #fc625d; box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b; - left: 12px; margin-top: -20px; + margin-left: 10px; position: absolute; @include round-icon(12px); } diff --git a/assets/css/_common/scaffolding/highlight/index.scss b/assets/css/_common/scaffolding/highlight/index.scss index 8181783..c411a45 100644 --- a/assets/css/_common/scaffolding/highlight/index.scss +++ b/assets/css/_common/scaffolding/highlight/index.scss @@ -1,17 +1,5 @@ -// Use `@use` to fix issue #67 -// TODO find way to import file by dynmatic -// @import '(theme.highlight.enable && theme.highlight.light.file) ? theme.highlight.light.file : null'; -// @import '(theme.prism.enable && theme.prism.light) ? theme.prism.light : null'; -// @import '(theme.prism.enable && theme.prism.number) ? theme.prism.number : null'; +@import 'copy-code'; -/* @media (prefers-color-scheme: dark) { - @import '(theme.darkmode && theme.highlight.enable && theme.highlight.dark.file) ? theme.highlight.dark.file : null'; - @import '(theme.darkmode && theme.prism.enable && theme.prism.dark) ? theme.prism.dark : null'; -} */ - -// @import 'theme.codeblock.copy_button.enable ? "copy-code" : null'; - -// Placeholder: %code-inline %code-block %code-inline { background: var(--highlight-background); color: var(--highlight-foreground); @@ -23,36 +11,14 @@ margin: 0 auto 20px; } -%figcaption { - background: var(--highlight-gutter-background); - color: var(--highlight-foreground); - display: flow-root; - font-size: $table-font-size; - line-height: 1.2; - padding: .5em; - a { - color: var(--highlight-foreground); - float: right; - - &:hover { - border-bottom-color: var(--highlight-foreground); - } - } +pre { + padding: 10px; } - pre, code { font-family: $code-font-family; - color: #fff; } -code { - @extend %code-inline; - border-radius: 3px; - font-size: $table-font-size; - padding: 2px 4px; - @include word-wrap(); -} kbd { @extend %code-inline; @@ -62,82 +28,4 @@ kbd { font-family: inherit; padding: .1em .3em; white-space: nowrap; - color: #fff; -} - -// `highlight.line_number: false` and `highlight.wrap: false` -// in Hexo config generates code.highlight elements -figure.highlight { - @extend %code-block; - position: relative; - - pre { - border: 0; - margin: 0; - padding: 10px 0; - } - - table { - border: 0; - margin: 0; - width: auto; - } - - td { - border: 0; - padding: 0; - } - - figcaption { - @extend %figcaption; - } - - .gutter { - @include disable-user-select(); - - pre { - background: var(--highlight-gutter-background); - color: var(--highlight-gutter-foreground); - padding-left: 10px; - padding-right: 10px; - text-align: right; - } - } - - .code pre { - padding-left: 10px; - width: 100%; - } - - // See https://github.com/next-theme/hexo-theme-next/discussions/410 - .marked { - background: rgba(0, 0, 0, .3); - } -} - -// See https://github.com/hexojs/hexo-util/pull/229 -pre .caption, pre figcaption { - @extend %figcaption; - margin-bottom: 10px; -} - -.gist table { - width: auto; - - td { - border: 0; - } -} - -pre { - @extend %code-block; - overflow: auto; - padding: 10px; - position: relative; - - code { - background: none; - padding: 0; - text-shadow: none; - } -} +} \ No newline at end of file diff --git a/assets/css/main.scss b/assets/css/main.scss index a343e6b..77c1e5a 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -47,10 +47,10 @@ $font_title_size : {{ default $P.font.title.size 1.375 }}; // Code & Code blocks // TODO find the configure variable -$highlight_dark_background : #000; -$highlight_dark_foreground : #222; -$highlight_light_background : #000; -$highlight_light_foreground : #222; +$highlight_dark_background : #1c1b1b; +$highlight_dark_foreground : #fff; +$highlight_light_background : #fff; +$highlight_light_foreground : #555; $codeblock_copy_btn_style : {{ $P.codeblock.copyBtn.style }}; diff --git a/assets/js/utils.js b/assets/js/utils.js index e014822..0a80fc2 100644 --- a/assets/js/utils.js +++ b/assets/js/utils.js @@ -40,15 +40,12 @@ NexT.utils = { * One-click copy code support. */ registerCopyCode: function() { - let figure = document.querySelectorAll('figure.highlight'); - if (figure.length === 0) figure = document.querySelectorAll('pre:not(.mermaid)'); + let figure = document.querySelectorAll('.highlight pre'); + if (figure.length === 0 || !CONFIG.copycode) return; figure.forEach(element => { - element.querySelectorAll('.code .line span').forEach(span => { - span.classList.forEach(name => { - span.classList.replace(name, `hljs-${name}`); - }); - }); - if (!CONFIG.copycode) return; + let cn = element.querySelector('code').className; + // TODO seems hard code need find other ways fixed it. + if (cn == '') return; element.insertAdjacentHTML('beforeend', '
'); const button = element.querySelector('.copy-btn'); button.addEventListener('click', () => {