kushidou/hugo-theme-stack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: codeblock improvements (#1328)

Browse Source 
* fix: do not show codeblock copy button if clipboard api is not available

related: https://github.com/CaiJimmy/hugo-theme-stack/issues/1309

* fix: remove duplicated codeblock script in main.ts

* feat: add i18n support to codeblock copy button

* feat: add translation strings for codeblock copy button
This commit is contained in:
Jimmy
2026-04-26 13:40:46 +02:00
committed by GitHub
parent 9ddd11797b
commit 08a8b5d767
35 changed files with 181 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/ts/code-copy.ts
+41
View File
@@ -0,0 +1,41 @@
import * as params from '@params';
export function setupCodeCopy() {
/**
* Add copy button to code block
*/
const highlights = document.querySelectorAll('.article-content div.highlight');
const copyText = params.codeblock.copy,
copiedText = params.codeblock.copied;
if (!navigator.clipboard) {
/// Clipboard API is only supported in secure contexts (HTTPS)
console.warn('Clipboard API not supported, copy button will not work.');
return;
}
highlights.forEach(highlight => {
const copyButton = document.createElement('button');
copyButton.innerHTML = copyText;
copyButton.classList.add('copyCodeButton');
highlight.appendChild(copyButton);
const codeBlock = highlight.querySelector('code[data-lang]');
if (!codeBlock) return;
copyButton.addEventListener('click', () => {
navigator.clipboard.writeText(codeBlock.textContent)
.then(() => {
copyButton.textContent = copiedText;
setTimeout(() => {
copyButton.textContent = copyText;
}, 1000);
})
.catch(err => {
alert(err)
console.log('Something went wrong', err);
});
});
});
};
assets/ts/main.ts
+2 -32
View File
@@ -11,6 +11,7 @@ import StackColorScheme from './colorScheme';
import { setupScrollspy } from './scrollspy';
import { setupSmoothAnchors } from './smoothAnchors';
import { setupPaginationJump } from './pagination';
import { setupCodeCopy } from './code-copy';
let Stack = {
init: () => {
@@ -23,42 +24,11 @@ let Stack = {
if (articleContent) {
setupSmoothAnchors();
setupScrollspy();
setupCodeCopy();
}
setupPaginationJump();
/**
* Add copy button to code block
*/
const highlights = document.querySelectorAll('.article-content div.highlight');
const copyText = `Copy`,
copiedText = `Copied!`;
highlights.forEach(highlight => {
const copyButton = document.createElement('button');
copyButton.innerHTML = copyText;
copyButton.classList.add('copyCodeButton');
highlight.appendChild(copyButton);
const codeBlock = highlight.querySelector('code[data-lang]');
if (!codeBlock) return;
copyButton.addEventListener('click', () => {
navigator.clipboard.writeText(codeBlock.textContent)
.then(() => {
copyButton.textContent = copiedText;
setTimeout(() => {
copyButton.textContent = copyText;
}, 1000);
})
.catch(err => {
alert(err)
console.log('Something went wrong', err);
});
});
});
new StackColorScheme(document.getElementById('dark-mode-toggle')!);
}
}