feat: add copy button and scroll for code blocks

Note that you need to add the related new params to `config.toml`
by yourself. Otherwise, these feats can't be appended.

closes #76

assets/js/copy.js

@@ -0,0 +1,64 @@
+// Copy Button for Code Blocks
+
+// References
+// 1. https://tomspencer.dev/blog/2018/09/14/adding-click-to-copy-buttons-to-a-hugo-powered-blog/
+// 2. https://www.dannyguo.com/blog/how-to-add-copy-to-clipboard-buttons-to-code-blocks-in-hugo/
+
+const copyText = '{{ i18n "copy" }}';
+const copiedText = '{{ i18n "copied" }}';
+
+document.querySelectorAll('.post-body > pre').forEach((e) => {
+    e.outerHTML = `<div style="position: relative">${e.outerHTML}</div>`;
+});
+
+function addCopyButtons(clipboard) {
+    const divs = document.querySelectorAll('table.lntable, .highlight > pre, .post-body > div > pre');
+
+    divs.forEach((containerEl) => {
+        containerEl.parentNode.style.position = 'relative';
+
+        const button = document.createElement('button');
+        button.className = 'copy-button';
+        button.type = 'button';
+        button.innerText = copyText;
+
+        if (containerEl.classList.contains('lntable')) {
+            var codeBlock = containerEl.querySelectorAll('.lntd')[1];
+        } else {
+            var codeBlock = containerEl.querySelector('code');
+        }
+
+        button.addEventListener('click', () => {
+            clipboard.writeText(codeBlock.innerText).then(() => {
+                /* Chrome doesn't seem to blur automatically,
+                   leaving the button in a focused state. */
+                button.blur();
+
+                button.innerText = copiedText;
+
+                setTimeout(() => {
+                    button.innerText = copyText;
+                }, 1000);
+            }).catch((error) => {
+                button.innerText = 'Error';
+
+                console.error(error);
+            });
+        });
+
+        containerEl.appendChild(button);
+    });
+}
+
+if (navigator && navigator.clipboard) {
+    addCopyButtons(navigator.clipboard);
+} else {
+    const script = document.createElement('script');
+    script.src = '{{ partial "third-party/clipboard-polyfill.html" | safeJS }}';
+    script.defer = true;
+    script.onload = function() {
+        addCopyButtons(clipboard);
+    };
+
+    document.body.appendChild(script);
+}

assets/scss/base/_base.scss

@@ -88,7 +88,7 @@ a {
 
 ::-webkit-scrollbar {
     width: 0.4rem;
-    height: 0.2rem;
+    height: 0.4rem;
 }
 ::-webkit-scrollbar-track {
     background-color: var(--color-bg);
@@ -102,3 +102,6 @@ a {
         background-color: alpha(var(--color-primary), 0.75);
     }
 }
+::-webkit-scrollbar-corner {
+    background-color: var(--color-bg);
+}

assets/scss/base/_font-family.scss

@@ -28,7 +28,7 @@
 }
 
 @if variable-exists("fontFamilyCode") {
-    code, pre, sup, .post-meta, .updated-badge, .post-gitinfo, .minimal-footer, .minimal-footer-about, .busuanzi-site-uv-and-pv {
+    code, pre, sup, .post-meta, .updated-badge, .post-gitinfo, .minimal-footer, .minimal-footer-about, .busuanzi-site-uv-and-pv, .copy-button {
         font-family: $fontFamilyCode;
     }
 }

assets/scss/components/_highlight.scss

@@ -3,7 +3,10 @@
     margin: 2rem 0;
     pre {
         margin: 0 !important;
+        max-height: unset;
         overflow: auto hidden;
+    }
+    .lntd pre {
         background-color: unset;
     }
     th, td {
@@ -28,3 +31,26 @@ span.lnt {
     color: var(--color-contrast-high);
     background-color: alpha(var(--color-contrast-lower), 0.5);
 }
+
+@if ($enableOverflowY) {
+    .lntable, .highlight > pre {
+        max-height: $maxHeight;
+        overflow: auto;
+    }
+}
+
+@if (enableCopy) {
+    .copy-button {
+        position: absolute;
+        top: 0;
+        right: 0;
+        border: 0;
+        color: var(--color-bg);
+        background-color: alpha(var(--color-contrast-medium), 0.5);
+        transition: background-color $duration;
+        cursor: pointer;
+        &:hover {
+            background-color: alpha(var(--color-primary), 0.5);
+        }
+    }
+}

assets/scss/layout/_single.scss

@@ -221,6 +221,13 @@ pre {
     }
 }
 
+@if ($enableOverflowY) {
+    pre {
+        max-height: $maxHeight;
+        overflow: auto;
+    }
+}
+
 .katex-display, mjx-container[jax="CHTML"][display="true"] {
     overflow: auto hidden;
     text-indent: 0;

assets/scss/main.scss

@@ -35,6 +35,22 @@
     $enableNavToggle: false;
 {{ end }}
 
+{{ if .Site.Params.enableOverflowY }}
+    $enableOverflowY: true;
+{{ else }}
+    $enableOverflowY: false;
+{{ end }}
+
+{{ with .Site.Params.maxHeight | default 20 }}
+    $maxHeight: {{ . }}em;
+{{ end }}
+
+{{ if .Site.Params.enableCopy }}
+    $enableCopy: true;
+{{ else }}
+    $enableCopy: false;
+{{ end }}
+
 
 // Utilities
 

config-examples/en/config.toml

@@ -1233,10 +1233,16 @@ uglyURLs = false
 
 
     ######################################
-    # Syntax Highlighting
+    # Code Blocks
 
     enableHighlight = true
 
+    enableOverflowY = true
+    maxHeight = 20
+    # Unit: em
+
+    enableCopy = true
+
 
     ######################################
     # Fingerprinting and SRI

config-examples/zh-cn/config.toml

@@ -1204,11 +1204,20 @@ uglyURLs = false
 
 
     ######################################
-    # 代码高亮
+    # 代码块
 
-    # 是否开启
+    # 是否开启高亮
     enableHighlight = true
 
+    # 是否开启竖直滚动
+    enableOverflowY = true
+    # 最大高度
+    maxHeight = 20
+    # 单位：em
+
+    # 是否开启复制
+    enableCopy = true
+
 
     ######################################
     # 文件指纹和子资源完整性（SRI）

exampleSite/resources/_gen/assets/scss/scss/main.scss_0437a1669ac8a9868f1dd1fe846b91a6.json

@@ -0,0 +1 @@
+{"Target":"css/meme.min.8ebc75cc2e0d5e4beb6ce2cd77cc927ddff5609c3822cb96860098df7115a001.css","MediaType":"text/css","Data":{"Integrity":"sha256-jrx1zC4NXkvrbOLNd8ySfd/1YJw4IsuWhgCY33EVoAE="}}

i18n/de.toml

@@ -20,6 +20,12 @@ other = "Neuer"
 [nextPage]
 other = "Älter"
 
+[copy]
+other = "Kopieren"
+
+[copied]
+other = "Kopiert!"
+
 [copyrightAuthor]
 other = "Autor"
 

i18n/en.toml

@@ -20,6 +20,12 @@ other = "Newer"
 [nextPage]
 other = "Older"
 
+[copy]
+other = "Copy"
+
+[copied]
+other = "Copied!"
+
 [copyrightAuthor]
 other = "Author"
 

i18n/zh.toml

@@ -20,6 +20,12 @@ other = "上一页"
 [nextPage]
 other = "下一页"
 
+[copy]
+other = "复制"
+
+[copied]
+other = "已复制！"
+
 [copyrightAuthor]
 other = "作者"
 

layouts/partials/script.html

@@ -5,6 +5,7 @@
 {{- $darkMode := resources.Get "js/dark-mode.js" | resources.ExecuteAsTemplate "js/dark-mode-rendered.js" . -}}
 {{- $lang := resources.Get "js/multilingual.js" | resources.ExecuteAsTemplate "js/multilingual-rendered.js" . -}}
 {{- $wrapTable := resources.Get "js/wrap-table.js" | resources.ExecuteAsTemplate "js/wrap-table-rendered.js" . -}}
+{{- $copy := resources.Get "js/copy.js" | resources.ExecuteAsTemplate "js/copy-rendered.js" . -}}
 {{- $comments := resources.Get "js/comments.js" | resources.ExecuteAsTemplate "js/comments-rendered.js" . -}}
 {{- $custom := resources.Get "js/custom.js" | resources.ExecuteAsTemplate "js/custom-rendered.js" . -}}
 
@@ -32,6 +33,10 @@
 
 {{- .Scratch.Add "script" (slice $wrapTable) -}}
 
+{{- if .Site.Params.enableCopy -}}
+    {{- .Scratch.Add "script" (slice $copy) -}}
+{{- end -}}
+
 {{- if and .Site.Params.enableComments (eq hugo.Environment "production") -}}
     {{- .Scratch.Add "script" (slice $comments) -}}
 {{- end -}}

layouts/partials/third-party/clipboard-polyfill.html

@@ -0,0 +1 @@
+https://cdn.jsdelivr.net/npm/clipboard-polyfill@2.8.6/dist/clipboard-polyfill.min.js