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
This commit is contained in:
Jimmy Cai 2022-02-06 20:32:37 +01:00 committed by GitHub
parent 88beecd101
commit d75dbe2b6e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 66 additions and 46 deletions

View file

@ -123,7 +123,6 @@
} }
.article-page.has-toc { .article-page.has-toc {
.left-sidebar { .left-sidebar {
display: none; 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 { .table-wrapper {
padding: 0 var(--card-padding); padding: 0 var(--card-padding);
overflow-x: auto; overflow-x: auto;
@ -449,6 +483,7 @@
/// Negative margins /// Negative margins
blockquote, blockquote,
figure, figure,
.highlight,
pre, pre,
.gallery, .gallery,
.video-wrapper, .video-wrapper,
@ -458,30 +493,4 @@
margin-right: calc((var(--card-padding)) * -1); margin-right: calc((var(--card-padding)) * -1);
width: calc(100% + var(--card-padding) * 2); 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;
}
} }

View file

@ -62,20 +62,21 @@ let Stack = {
/** /**
* Add copy button to code block * 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`, const copyText = `Copy`,
copiedText = `Copied!`; copiedText = `Copied!`;
codeBlocks.forEach(codeBlock => {
highlights.forEach(highlight => {
const copyButton = document.createElement('button'); const copyButton = document.createElement('button');
copyButton.innerHTML = copyText; copyButton.innerHTML = copyText;
copyButton.classList.add('copyCodeButton'); 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', () => { copyButton.addEventListener('click', () => {
navigator.clipboard.writeText(code) navigator.clipboard.writeText(codeBlock.textContent)
.then(() => { .then(() => {
copyButton.textContent = copiedText; copyButton.textContent = copiedText;

View file

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

View file

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