diff --git a/assets/css/_common/scaffolding/highlight/copy-code.scss b/assets/css/_common/scaffolding/highlight/copy-code.scss index 23c14c5..ad3e72e 100644 --- a/assets/css/_common/scaffolding/highlight/copy-code.scss +++ b/assets/css/_common/scaffolding/highlight/copy-code.scss @@ -5,8 +5,66 @@ margin-bottom: 26px; line-height: 1.25; + > .code-header { + color:#f8f8f2; + display: flex; + justify-content: space-between; + align-items: center; + padding: .25rem 0; + width: 100%; + + &:hover { + cursor: pointer; + } + + .code-lang { + width: 100%; + text-align: center; + font-weight: bold; + + &::after { + content: "Code"; + } + } + + .collapse-btn { + font-family: "Font Awesome 6 Free"; + font-weight: 900; + text-align: center; + width: 1.25em; + display: inline-block; + font-style: normal; + font-variant: normal; + line-height: 1; + text-rendering: auto; + padding-right: .25rem; + + &::before { + content: "\f102"; + } + + &.collapse::before { + content: "\f103"; + } + } + + @each $type, $text in $code-type-list { + &.#{$type} .code-lang::after { + content: $text; + } + } + + .ellipses-btn { + padding-right: .45rem; + } + } + > .chroma { position: relative; + + &.hidden-code { + display: none; + } pre { padding: .45rem 0; @@ -40,150 +98,77 @@ line-break: anywhere; word-break: break-all; } - } - /** monokai highlight style **/ - /* Background */ .bg { color:#f8f8f2;background-color:#272822; } - /* PreWrapper */ .chroma { color:#f8f8f2;background-color:#272822; } - /* Other */ .chroma .x { } - /* Error */ .chroma .err { color:#960050;background-color:#1e0010 } - /* CodeLine */ .chroma .cl { } - /* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit } - /* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; } - /* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; } - /* LineHighlight */ .chroma .hl { background-color:#3c3d38 } - /* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f } - /* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f } - /* Line */ .chroma .line { display:flex; } - /* Keyword */ .chroma .k { color:#66d9ef } - /* KeywordConstant */ .chroma .kc { color:#66d9ef } - /* KeywordDeclaration */ .chroma .kd { color:#66d9ef } - /* KeywordNamespace */ .chroma .kn { color:#f92672 } - /* KeywordPseudo */ .chroma .kp { color:#66d9ef } - /* KeywordReserved */ .chroma .kr { color:#66d9ef } - /* KeywordType */ .chroma .kt { color:#66d9ef } - /* Name */ .chroma .n { } - /* NameAttribute */ .chroma .na { color:#a6e22e } - /* NameBuiltin */ .chroma .nb { } - /* NameBuiltinPseudo */ .chroma .bp { } - /* NameClass */ .chroma .nc { color:#a6e22e } - /* NameConstant */ .chroma .no { color:#66d9ef } - /* NameDecorator */ .chroma .nd { color:#a6e22e } - /* NameEntity */ .chroma .ni { } - /* NameException */ .chroma .ne { color:#a6e22e } - /* NameFunction */ .chroma .nf { color:#a6e22e } - /* NameFunctionMagic */ .chroma .fm { } - /* NameLabel */ .chroma .nl { } - /* NameNamespace */ .chroma .nn { } - /* NameOther */ .chroma .nx { color:#a6e22e } - /* NameProperty */ .chroma .py { } - /* NameTag */ .chroma .nt { color:#f92672 } - /* NameVariable */ .chroma .nv { } - /* NameVariableClass */ .chroma .vc { } - /* NameVariableGlobal */ .chroma .vg { } - /* NameVariableInstance */ .chroma .vi { } - /* NameVariableMagic */ .chroma .vm { } - /* Literal */ .chroma .l { color:#ae81ff } - /* LiteralDate */ .chroma .ld { color:#e6db74 } - /* LiteralString */ .chroma .s { color:#e6db74 } - /* LiteralStringAffix */ .chroma .sa { color:#e6db74 } - /* LiteralStringBacktick */ .chroma .sb { color:#e6db74 } - /* LiteralStringChar */ .chroma .sc { color:#e6db74 } - /* LiteralStringDelimiter */ .chroma .dl { color:#e6db74 } - /* LiteralStringDoc */ .chroma .sd { color:#e6db74 } - /* LiteralStringDouble */ .chroma .s2 { color:#e6db74 } - /* LiteralStringEscape */ .chroma .se { color:#ae81ff } - /* LiteralStringHeredoc */ .chroma .sh { color:#e6db74 } - /* LiteralStringInterpol */ .chroma .si { color:#e6db74 } - /* LiteralStringOther */ .chroma .sx { color:#e6db74 } - /* LiteralStringRegex */ .chroma .sr { color:#e6db74 } - /* LiteralStringSingle */ .chroma .s1 { color:#e6db74 } - /* LiteralStringSymbol */ .chroma .ss { color:#e6db74 } - /* LiteralNumber */ .chroma .m { color:#ae81ff } - /* LiteralNumberBin */ .chroma .mb { color:#ae81ff } - /* LiteralNumberFloat */ .chroma .mf { color:#ae81ff } - /* LiteralNumberHex */ .chroma .mh { color:#ae81ff } - /* LiteralNumberInteger */ .chroma .mi { color:#ae81ff } - /* LiteralNumberIntegerLong */ .chroma .il { color:#ae81ff } - /* LiteralNumberOct */ .chroma .mo { color:#ae81ff } - /* Operator */ .chroma .o { color:#f92672 } - /* OperatorWord */ .chroma .ow { color:#f92672 } - /* Punctuation */ .chroma .p { } - /* Comment */ .chroma .c { color:#75715e } - /* CommentHashbang */ .chroma .ch { color:#75715e } - /* CommentMultiline */ .chroma .cm { color:#75715e } - /* CommentSingle */ .chroma .c1 { color:#75715e } - /* CommentSpecial */ .chroma .cs { color:#75715e } - /* CommentPreproc */ .chroma .cp { color:#75715e } - /* CommentPreprocFile */ .chroma .cpf { color:#75715e } - /* Generic */ .chroma .g { } - /* GenericDeleted */ .chroma .gd { color:#f92672 } - /* GenericEmph */ .chroma .ge { font-style:italic } - /* GenericError */ .chroma .gr { } - /* GenericHeading */ .chroma .gh { } - /* GenericInserted */ .chroma .gi { color:#a6e22e } - /* GenericOutput */ .chroma .go { } - /* GenericPrompt */ .chroma .gp { } - /* GenericStrong */ .chroma .gs { font-weight:bold } - /* GenericSubheading */ .chroma .gu { color:#75715e } - /* GenericTraceback */ .chroma .gt { } - /* GenericUnderline */ .chroma .gl { } - /* TextWhitespace */ .chroma .w { } -} + @if $codeblock_copy_btn_enable { -@if $codeblock_copy_btn_enable { + &:hover .copy-btn { + opacity: 1; + } + + .copy-btn { + color: $black-dim; + cursor: pointer; + line-height: 1.6; + opacity: 0; + padding: 2px 6px; + position: absolute; + right: 8px; + top: 4px; + border-radius: 3px; + font-size: $font-size-medium; + transition: opacity $transition-ease; + background: var(--highlight-background); + + font-family: "Font Awesome 6 Free"; + font-weight: 900; + text-align: center; + width: 1.25em; + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; - .highlight:hover .copy-btn, pre:hover .copy-btn { - opacity: 1; - } + &::before { + content: "\f0c5"; + } - .copy-btn { - color: $black-dim; - cursor: pointer; - line-height: 1.6; - opacity: 0; - padding: 2px 6px; - position: absolute; - right: 8px; - top: 4px; - transition: opacity $transition-ease; - background: var(--highlight-background); + &.copied::before { + content: "\f058"; + } - @if $codeblock_style == 'flat' { - background: white; - border: 0; - font-size: $font-size-smaller; - - } @else if $codeblock_style == 'mac' { - color: var(--highlight-foreground); - font-size: 14px; - 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; - + &.uncopied::before { + content: "\f057"; + } + + @if $codeblock_style == 'flat' { + background: white; + border: 0; + } @else if $codeblock_style == 'mac' { + color: var(--highlight-foreground); + } @else { + background-color: $gainsboro; + background-image: linear-gradient(#fcfcfc, $gainsboro); + border: 1px solid #d5d5d5; + } + } } } -} -@if $codeblock_style == 'mac' { - .highlight { + + @if $codeblock_style == 'mac' { + border-radius: 5px; box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4); - padding-top: 30px; - > div { + .code-header { + &::before { background: #fc625d; box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b; - margin-top: -20px; margin-left: 10px; - position: absolute; @include round-icon(12px); } } } + } \ No newline at end of file diff --git a/assets/css/_common/scaffolding/highlight/index.scss b/assets/css/_common/scaffolding/highlight/index.scss index bea46e8..fa461bd 100644 --- a/assets/css/_common/scaffolding/highlight/index.scss +++ b/assets/css/_common/scaffolding/highlight/index.scss @@ -1,4 +1,5 @@ @import 'copy-code'; +@import 'monokai'; %code-inline { background: var(--highlight-background); @@ -8,7 +9,7 @@ pre { padding: 18px; margin: 0; -} +} p > code, li > code { @extend %code-inline; diff --git a/assets/css/_common/scaffolding/highlight/monokai.scss b/assets/css/_common/scaffolding/highlight/monokai.scss new file mode 100644 index 0000000..46d95f2 --- /dev/null +++ b/assets/css/_common/scaffolding/highlight/monokai.scss @@ -0,0 +1,87 @@ +/** monokai highlight style **/ + /* Background */ .bg { color:#f8f8f2;background-color:#272822; } + /* PreWrapper */ .chroma { color:#f8f8f2;background-color:#272822; } + /* Other */ .chroma .x { } + /* Error */ .chroma .err { color:#960050;background-color:#1e0010 } + /* CodeLine */ .chroma .cl { } + /* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit } + /* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; } + /* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; } + /* LineHighlight */ .chroma .hl { background-color:#3c3d38 } + /* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f } + /* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f } + /* Line */ .chroma .line { display:flex; } + /* Keyword */ .chroma .k { color:#66d9ef } + /* KeywordConstant */ .chroma .kc { color:#66d9ef } + /* KeywordDeclaration */ .chroma .kd { color:#66d9ef } + /* KeywordNamespace */ .chroma .kn { color:#f92672 } + /* KeywordPseudo */ .chroma .kp { color:#66d9ef } + /* KeywordReserved */ .chroma .kr { color:#66d9ef } + /* KeywordType */ .chroma .kt { color:#66d9ef } + /* Name */ .chroma .n { } + /* NameAttribute */ .chroma .na { color:#a6e22e } + /* NameBuiltin */ .chroma .nb { } + /* NameBuiltinPseudo */ .chroma .bp { } + /* NameClass */ .chroma .nc { color:#a6e22e } + /* NameConstant */ .chroma .no { color:#66d9ef } + /* NameDecorator */ .chroma .nd { color:#a6e22e } + /* NameEntity */ .chroma .ni { } + /* NameException */ .chroma .ne { color:#a6e22e } + /* NameFunction */ .chroma .nf { color:#a6e22e } + /* NameFunctionMagic */ .chroma .fm { } + /* NameLabel */ .chroma .nl { } + /* NameNamespace */ .chroma .nn { } + /* NameOther */ .chroma .nx { color:#a6e22e } + /* NameProperty */ .chroma .py { } + /* NameTag */ .chroma .nt { color:#f92672 } + /* NameVariable */ .chroma .nv { } + /* NameVariableClass */ .chroma .vc { } + /* NameVariableGlobal */ .chroma .vg { } + /* NameVariableInstance */ .chroma .vi { } + /* NameVariableMagic */ .chroma .vm { } + /* Literal */ .chroma .l { color:#ae81ff } + /* LiteralDate */ .chroma .ld { color:#e6db74 } + /* LiteralString */ .chroma .s { color:#e6db74 } + /* LiteralStringAffix */ .chroma .sa { color:#e6db74 } + /* LiteralStringBacktick */ .chroma .sb { color:#e6db74 } + /* LiteralStringChar */ .chroma .sc { color:#e6db74 } + /* LiteralStringDelimiter */ .chroma .dl { color:#e6db74 } + /* LiteralStringDoc */ .chroma .sd { color:#e6db74 } + /* LiteralStringDouble */ .chroma .s2 { color:#e6db74 } + /* LiteralStringEscape */ .chroma .se { color:#ae81ff } + /* LiteralStringHeredoc */ .chroma .sh { color:#e6db74 } + /* LiteralStringInterpol */ .chroma .si { color:#e6db74 } + /* LiteralStringOther */ .chroma .sx { color:#e6db74 } + /* LiteralStringRegex */ .chroma .sr { color:#e6db74 } + /* LiteralStringSingle */ .chroma .s1 { color:#e6db74 } + /* LiteralStringSymbol */ .chroma .ss { color:#e6db74 } + /* LiteralNumber */ .chroma .m { color:#ae81ff } + /* LiteralNumberBin */ .chroma .mb { color:#ae81ff } + /* LiteralNumberFloat */ .chroma .mf { color:#ae81ff } + /* LiteralNumberHex */ .chroma .mh { color:#ae81ff } + /* LiteralNumberInteger */ .chroma .mi { color:#ae81ff } + /* LiteralNumberIntegerLong */ .chroma .il { color:#ae81ff } + /* LiteralNumberOct */ .chroma .mo { color:#ae81ff } + /* Operator */ .chroma .o { color:#f92672 } + /* OperatorWord */ .chroma .ow { color:#f92672 } + /* Punctuation */ .chroma .p { } + /* Comment */ .chroma .c { color:#75715e } + /* CommentHashbang */ .chroma .ch { color:#75715e } + /* CommentMultiline */ .chroma .cm { color:#75715e } + /* CommentSingle */ .chroma .c1 { color:#75715e } + /* CommentSpecial */ .chroma .cs { color:#75715e } + /* CommentPreproc */ .chroma .cp { color:#75715e } + /* CommentPreprocFile */ .chroma .cpf { color:#75715e } + /* Generic */ .chroma .g { } + /* GenericDeleted */ .chroma .gd { color:#f92672 } + /* GenericEmph */ .chroma .ge { font-style:italic } + /* GenericError */ .chroma .gr { } + /* GenericHeading */ .chroma .gh { } + /* GenericInserted */ .chroma .gi { color:#a6e22e } + /* GenericOutput */ .chroma .go { } + /* GenericPrompt */ .chroma .gp { } + /* GenericStrong */ .chroma .gs { font-weight:bold } + /* GenericSubheading */ .chroma .gu { color:#75715e } + /* GenericTraceback */ .chroma .gt { } + /* GenericUnderline */ .chroma .gl { } + /* TextWhitespace */ .chroma .w { } \ No newline at end of file diff --git a/assets/css/_variables/base.scss b/assets/css/_variables/base.scss index 9de4314..42be5bb 100644 --- a/assets/css/_variables/base.scss +++ b/assets/css/_variables/base.scss @@ -175,6 +175,60 @@ $highlight-foreground-dark : $highlight_dark_foreground; $highlight-gutter-background-dark : mix($highlight-background-dark, $highlight-foreground-dark, 90%); $highlight-gutter-foreground-dark : mix($highlight-background-dark, $highlight-foreground-dark, 10%); +// Code type list +$code-type-list: + "language-bash" "Bash", + "language-c" "C", + "language-cs" "C#", + "language-cpp" "C++", + "language-clojure" "Clojure", + "language-coffeescript" "CoffeeScript", + "language-css" "CSS", + "language-dart" "Dart", + "language-diff" "Diff", + "language-erlang" "Erlang", + "language-go" "Go", + "language-go-html-template" "Go HTML Template", + "language-groovy" "Groovy", + "language-haskell" "Haskell", + "language-html" "HTML", + "language-http" "HTTP", + "language-xml" "XML", + "language-java" "Java", + "language-js" "JavaScript", + "language-javascript" "JavaScript", + "language-json" "JSON", + "language-kotlin" "Kotlin", + "language-latex" "LaTeX", + "language-less" "Less", + "language-lisp" "Lisp", + "language-lua" "Lua", + "language-makefile" "Makefile", + "language-markdown" "Markdown", + "language-matlab" "Matlab", + "language-objectivec" "Objective-C", + "language-php" "PHP", + "language-perl" "Perl", + "language-powershell" "PowerShell", + "language-posh" "PowerShell", + "language-pwsh" "PowerShell", + "language-python" "Python", + "language-r" "R", + "language-ruby" "Ruby", + "language-rust" "Rust", + "language-scala" "Scala", + "language-scss" "Scss", + "language-shell" "Shell", + "language-sql" "SQL", + "language-swift" "Swift", + "language-tex" "TeX", + "language-toml" "TOML", + "language-ts" "TypeScript", + "language-typescript" "TypeScript", + "language-vue" "Vue", + "language-yml" "YAML", + "language-yaml" "YAML", + !default; // Buttons // -------------------------------------------------- diff --git a/assets/js/3rd/others/clipboard.js b/assets/js/3rd/others/clipboard.js index 02985cc..f4743ab 100644 --- a/assets/js/3rd/others/clipboard.js +++ b/assets/js/3rd/others/clipboard.js @@ -1,20 +1,43 @@ /* clipboard plugin */ NexT.plugins.others.clipboard = function () { - const clipboard_js = NexT.utils.getCDNResource(NexT.CONFIG.page.clipboard.js); + if (!NexT.CONFIG.copybtn) return; + const clipboard_js = NexT.utils.getCDNResource(NexT.CONFIG.page.clipboard.js); NexT.utils.getScript(clipboard_js, function () { - let figure = document.querySelectorAll('.highlight pre'); - if (figure.length === 0 || !NexT.CONFIG.copybtn) return; - - /** Add copy button DOM. **/ - figure.forEach(element => { - let cn = element.querySelector('code').className; - if (cn === '') return; - element.insertAdjacentHTML('beforeend', '
'); - }); + let chromaDiv = document.querySelectorAll('div.highlight div.chroma'); + if (chromaDiv.length === 0) return; - /** Register the clipboard event. **/ + chromaDiv.forEach(element => { + // Add copy button DOM. + let codeblock = element.querySelector('code[class]:not([class=""]'); + let lang = codeblock.className; + let copyBtn = document.createElement('div'); + copyBtn.classList.add('copy-btn'); + codeblock.parentNode .appendChild(copyBtn); + + element.addEventListener('mouseleave', () => { + setTimeout(() => { + copyBtn.classList.remove('copied'); + copyBtn.classList.remove('copieduncopied'); + }, 300); + }); + + // Add code header show + var ch = document.createElement('div'); + ch.classList.add('code-header'); + ch.classList.add(lang); + ch.insertAdjacentHTML('afterbegin', + ''); + ch.addEventListener('click', function () { + element.classList.toggle('hidden-code'); + ch.querySelector('.collapse-btn').classList.toggle('collapse'); + }, false); + + element.parentNode.insertBefore(ch, element); + }); + + // Register the clipboard event. var clipboard = new ClipboardJS('.copy-btn', { text: function (trigger) { // TODO: Why there clipboard default text content with enter? @@ -24,12 +47,12 @@ NexT.plugins.others.clipboard = function () { clipboard.on('success', function (e) { e.clearSelection(); - e.trigger.querySelector('i').className = 'fa fa-fw fa-check-circle'; + e.trigger.classList.add('copied'); }); clipboard.on('error', function (e) { - console.error('Copy failed:', e); - e.trigger.querySelector('i').className = 'fa fa-fw fa-times-circle'; + console.error('Copy failed:', e); + e.trigger.classList.add('uncopied'); }); - }); + }); } \ No newline at end of file