fix: copy code button does not work when line number is enabled (#487)

* fix: copy code button does not work when line number is enabled

* fix pre style

* Add gist shortcode to exampleSite

assets/scss/partials/layout/article.scss

@@ -123,7 +123,6 @@
 }
 
 .article-page.has-toc {
-
     .left-sidebar {
         display: none;
     }
@@ -395,6 +394,41 @@
         }
     }
 
+    .highlight {
+        background-color: var(--pre-background-color);
+        padding: var(--card-padding);
+        position: relative;
+
+        &:hover {
+            .copyCodeButton {
+                opacity: 1;
+            }
+        }
+
+        pre {
+            margin: initial;
+            padding: 0;
+            margin: 0;
+            width: auto;
+        }
+    }
+
+    .copyCodeButton {
+        position: absolute;
+        top: calc(var(--card-padding));
+        right: calc(var(--card-padding));
+        background: var(--card-background);
+        border: none;
+        box-shadow: var(--shadow-l2);
+        border-radius: var(--tag-border-radius);
+        padding: 8px 16px;
+        color: var(--card-text-color-main);
+        cursor: pointer;
+        font-size: 14px;
+        opacity: 0;
+        transition: opacity 0.3s ease;
+    }
+
     .table-wrapper {
         padding: 0 var(--card-padding);
         overflow-x: auto;
@@ -449,6 +483,7 @@
     /// Negative margins
     blockquote,
     figure,
+    .highlight,
     pre,
     .gallery,
     .video-wrapper,
@@ -458,30 +493,4 @@
         margin-right: calc((var(--card-padding)) * -1);
         width: calc(100% + var(--card-padding) * 2);
     }
-
-    .highlight {
-        position: relative;
-
-        &:hover {
-            .copyCodeButton {
-                opacity: 1;
-            }
-        }
-    }
-
-    .copyCodeButton {
-        position: absolute;
-        top: calc(var(--card-padding));
-        right: 0;
-        background: var(--card-background);
-        border: none;
-        box-shadow: var(--shadow-l2);
-        border-radius: var(--tag-border-radius);
-        padding: 8px 16px;
-        color: var(--card-text-color-main);
-        cursor: pointer;
-        font-size: 14px;
-        opacity: 0;
-        transition: opacity 0.3s ease;
-    }
 }

assets/ts/main.ts

@@ -62,20 +62,21 @@ let Stack = {
         /**
          * Add copy button to code block
         */
-        const codeBlocks = document.querySelectorAll('.article-content > div.highlight');
+        const highlights = document.querySelectorAll('.article-content div.highlight');
         const copyText = `Copy`,
             copiedText = `Copied!`;
-        codeBlocks.forEach(codeBlock => {
+
+        highlights.forEach(highlight => {
             const copyButton = document.createElement('button');
             copyButton.innerHTML = copyText;
             copyButton.classList.add('copyCodeButton');
-            codeBlock.appendChild(copyButton);
+            highlight.appendChild(copyButton);
 
-            const pre = codeBlock.getElementsByTagName('pre');
+            const codeBlock = highlight.querySelector('code[data-lang]');
-            const code = pre[0].textContent;
+            if (!codeBlock) return;
 
             copyButton.addEventListener('click', () => {
-                navigator.clipboard.writeText(code)
+                navigator.clipboard.writeText(codeBlock.textContent)
                     .then(() => {
                         copyButton.textContent = copiedText;
 

exampleSite/config.yaml

@@ -219,3 +219,9 @@ markup:
         startLevel: 2
     highlight:
         noClasses: false
+        codeFences: true
+        guessSyntax: true
+        lineNoStart: 1
+        lineNos: true
+        lineNumbersInTable: true
+        tabWidth: 4

exampleSite/content/post/rich-content/index.md

@@ -36,3 +36,7 @@ Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-manageme
 ## bilibilibi Shortcode
 
 {{< bilibili av498363026 >}}
+
+## Gist Shortcode
+
+{{< gist spf13 7896402 >}}