47 lines
2.0 KiB
JavaScript
47 lines
2.0 KiB
JavaScript
// create element for copy button in code blocks
|
|
var codeBlocks = document.querySelectorAll('pre');
|
|
codeBlocks.forEach(function (codeBlock) {
|
|
if ((codeBlock.querySelector('pre:not(.lineno)') || codeBlock.querySelector('code')) && codeBlock.querySelector('code:not(.language-mermaid)')) {
|
|
// create copy button
|
|
var copyButton = document.createElement('button');
|
|
copyButton.className = 'copy';
|
|
copyButton.type = 'button';
|
|
copyButton.ariaLabel = 'Copy code to clipboard';
|
|
copyButton.innerText = 'Copy';
|
|
copyButton.innerHTML = '<i class="fa-solid fa-clipboard"></i>';
|
|
|
|
// get code from code block and copy to clipboard
|
|
copyButton.addEventListener('click', function () {
|
|
// check if code block has line numbers
|
|
// i.e. `kramdown.syntax_highlighter_opts.block.line_numbers` set to true in _config.yml
|
|
// or using `jekyll highlight` liquid tag with `linenos` option
|
|
if (codeBlock.querySelector('pre:not(.lineno)')) {
|
|
// get code from code block ignoring line numbers
|
|
var code = codeBlock.querySelector('pre:not(.lineno)').innerText.trim();
|
|
} else { // if (codeBlock.querySelector('code')) {
|
|
// get code from code block when line numbers are not displayed
|
|
var code = codeBlock.querySelector('code').innerText.trim();
|
|
}
|
|
window.navigator.clipboard.writeText(code);
|
|
copyButton.innerText = 'Copied';
|
|
copyButton.innerHTML = '<i class="fa-solid fa-clipboard-check"></i>';
|
|
var waitFor = 3000;
|
|
|
|
setTimeout(function () {
|
|
copyButton.innerText = 'Copy';
|
|
copyButton.innerHTML = '<i class="fa-solid fa-clipboard"></i>';
|
|
}, waitFor);
|
|
});
|
|
|
|
// create wrapper div
|
|
var wrapper = document.createElement('div');
|
|
wrapper.className = 'code-display-wrapper';
|
|
|
|
// add copy button and code block to wrapper div
|
|
const parent = codeBlock.parentElement;
|
|
parent.insertBefore(wrapper, codeBlock);
|
|
wrapper.append(codeBlock);
|
|
wrapper.append(copyButton);
|
|
}
|
|
});
|