Skip to content

Instantly share code, notes, and snippets.

@ldijkman

ldijkman/chat gpt copy buttons to code bookmarklet

Last active January 27, 2024 11:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ldijkman/cc9a7745b2dab11df82b777da7221478 to your computer and use it in GitHub Desktop.
Save ldijkman/cc9a7745b2dab11df82b777da7221478 to your computer and use it in GitHub Desktop.
Download ZIP
bookmarklet add copy buttons to top and bottom of chat gpt code fields
Raw
chat gpt copy buttons to code bookmarklet
javascript:(function() { function copyToClipboard(text) { const textarea = document.createElement('textarea'); textarea.value = text; document.body.appendChild(textarea); textarea.select(); document.execCommand('copy'); document.body.removeChild(textarea); } function addCopyButtons() { const codeBlocks = document.querySelectorAll('pre code'); codeBlocks.forEach(function(codeBlock) { const topButton = createCopyButton(codeBlock); topButton.style.top = '0px'; const bottomButton = createCopyButton(codeBlock); bottomButton.style.bottom = '0px'; const pre = codeBlock.parentNode; if (pre.style.position !== 'relative') { pre.style.position = 'relative'; } pre.appendChild(topButton); pre.appendChild(bottomButton); }); } function createCopyButton(codeBlock) { const button = document.createElement('button'); button.textContent = 'Copy'; button.style.position = 'absolute'; button.style.right = '0px'; button.style.backgroundColor = '#fff'; button.style.border = '1px solid #000'; button.style.borderRadius = '4px'; button.style.cursor = 'pointer'; button.style.padding = '5px'; button.style.margin = '5px'; button.style.fontSize = '1rem'; button.onclick = function() { copyToClipboard(codeBlock.textContent); button.textContent = 'Copied!'; setTimeout(function() { button.textContent = 'Copy'; }, 2000); }; return button; } addCopyButtons();})();
@ldijkman
Copy link
Author

ldijkman commented Jan 27, 2024 •
edited

copy buttons bookmarklet seems also to work on this page
yeh sure this is also markdown with tree backticks

so a markdown codeblock tree backtick add copy buttons to top and bottom bookmarklet

javascript:(function() { function copyToClipboard(text) { const textarea = document.createElement('textarea'); textarea.value = text; document.body.appendChild(textarea); textarea.select(); document.execCommand('copy'); document.body.removeChild(textarea); } function addCopyButtons() { const codeBlocks = document.querySelectorAll('pre code'); codeBlocks.forEach(function(codeBlock) { const topButton = createCopyButton(codeBlock); topButton.style.top = '0px'; const bottomButton = createCopyButton(codeBlock); bottomButton.style.bottom = '0px'; const pre = codeBlock.parentNode; if (pre.style.position !== 'relative') { pre.style.position = 'relative'; } pre.appendChild(topButton); pre.appendChild(bottomButton); }); } function createCopyButton(codeBlock) { const button = document.createElement('button'); button.textContent = 'Copy'; button.style.position = 'absolute'; button.style.right = '0px'; button.style.backgroundColor = '#fff'; button.style.border = '1px solid #000'; button.style.borderRadius = '4px'; button.style.cursor = 'pointer'; button.style.padding = '5px'; button.style.margin = '5px'; button.style.fontSize = '1rem'; button.onclick = function() { copyToClipboard(codeBlock.textContent); button.textContent = 'Copied!'; setTimeout(function() { button.textContent = 'Copy'; }, 2000); }; return button; } addCopyButtons();})();

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment