From d75dbe2b6e7ec92f83a5b3866d6e809173be5da3 Mon Sep 17 00:00:00 2001 From: Jimmy Cai Date: Sun, 6 Feb 2022 20:32:37 +0100 Subject: [PATCH] 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 | 63 +++++++++++-------- assets/ts/main.ts | 13 ++-- exampleSite/config.yaml | 32 ++++++---- .../content/post/rich-content/index.md | 4 ++ 4 files changed, 66 insertions(+), 46 deletions(-) diff --git a/assets/scss/partials/layout/article.scss b/assets/scss/partials/layout/article.scss index 78ed81c..af5f7bb 100644 --- a/assets/scss/partials/layout/article.scss +++ b/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; - } } diff --git a/assets/ts/main.ts b/assets/ts/main.ts index 20de18c..f3160ae 100644 --- a/assets/ts/main.ts +++ b/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 code = pre[0].textContent; + const codeBlock = highlight.querySelector('code[data-lang]'); + if (!codeBlock) return; copyButton.addEventListener('click', () => { - navigator.clipboard.writeText(code) + navigator.clipboard.writeText(codeBlock.textContent) .then(() => { copyButton.textContent = copiedText; diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index a67b4aa..d449fc9 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -109,7 +109,7 @@ params: defaultHomeserverUrl: "https://matrix.cactus.chat:8448" serverName: "cactus.chat" siteName: "" # You must insert a unique identifier here matching the one you registered (See https://cactus.chat/docs/getting-started/quick-start/#register-your-site) - + giscus: repo: repoID: @@ -122,15 +122,15 @@ params: emitMetadata: 0 gitalk: - owner: - admin: - repo: - clientID: - clientSecret: - + owner: + admin: + repo: + clientID: + clientSecret: + cusdis: - host: - id: + host: + id: widgets: enabled: - search @@ -183,19 +183,19 @@ menu: ### For demonstration purpose, the home link will be open in a new tab newTab: true icon: home - + social: - identifier: github name: GitHub url: https://github.com/CaiJimmy/hugo-theme-stack params: - icon: brand-github - + icon: brand-github + - identifier: twitter name: Twitter url: https://twitter.com params: - icon: brand-twitter + icon: brand-twitter related: includeNewer: true @@ -219,3 +219,9 @@ markup: startLevel: 2 highlight: noClasses: false + codeFences: true + guessSyntax: true + lineNoStart: 1 + lineNos: true + lineNumbersInTable: true + tabWidth: 4 diff --git a/exampleSite/content/post/rich-content/index.md b/exampleSite/content/post/rich-content/index.md index af8a390..f2b45db 100644 --- a/exampleSite/content/post/rich-content/index.md +++ b/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 >}} \ No newline at end of file