Skip to content

Instantly share code, notes, and snippets.

@iaminamcom
Last active October 1, 2019 16:21
Show Gist options
  • Save iaminamcom/86c8db246ac75063867043af86d21b95 to your computer and use it in GitHub Desktop.
Save iaminamcom/86c8db246ac75063867043af86d21b95 to your computer and use it in GitHub Desktop.
Add 'copy to clipboard' button which works. Made speciically for Hugo code highlighter but after a little bit of modification works everywhere.
// copy to clipboard
const d = document;
const tempCopyInput = d.createElement('input');
d.body.appendChild(tempCopyInput);
tempCopyInput.style.position = 'fixed';
tempCopyInput.style.top = '-1000px';
// copy to clipboard function
const copyToCB = () => {
tempCopyInput.select();
d.execCommand('copy');
};
// Hugo outputs code `div` with `highlight` class name.
// copy from highlight container
let highlight = d.querySelectorAll('.highlight'),// or any div containing code stuff
copyIcon = d.createElement('button');
copyIcon.innerHTML = 'copy to clipboard';
highlight.forEach((hl) => {
hl.appendChild(copyIcon.cloneNode([true]));
hl.children[1].addEventListener('click',() => {
let codeText = hl.childNodes[0].textContent;
tempCopyInput.setAttribute('value', codeText);
copyToCB();
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment