Skip to content

Add copy-to-clipboard button to code blocks #313

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
joshbuchea merged 6 commits into from
May 28, 2026
Merged

Add copy-to-clipboard button to code blocks #313

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2e06bac
Add copy-to-clipboard button to code blocks
mattsafaii May 14, 2026
93c76d0
Always show copy button on touch devices
mattsafaii May 15, 2026
7dce870
Skip button creation when Clipboard API unavailable
mattsafaii May 16, 2026
1e5d997
Add aria-live status region for screen reader announcements
mattsafaii May 17, 2026
da60caf
Address second round of review feedback
mattsafaii May 20, 2026
5173cfe
Address third round of review feedback
mattsafaii May 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions _layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,43 @@
}
}
</script>
<script>
// copy to clipboard button on code blocks
var statusRegion = document.createElement('div');
statusRegion.className = 'visually-hidden';
statusRegion.setAttribute('aria-live', 'polite');
statusRegion.setAttribute('role', 'status');
document.body.appendChild(statusRegion);

var preBlocks = document.querySelectorAll('pre');
var preBlocksLength = preBlocks.length;
var j;
for (j = 0; j < preBlocksLength; j++) {
(function (pre) {
if (!navigator.clipboard || typeof navigator.clipboard.writeText !== 'function') return;
var button = document.createElement('button');
button.className = 'copy-btn';
button.type = 'button';
button.textContent = 'Copy';

button.addEventListener('click', function () {
var code = pre.querySelector('code');
var text = code ? code.innerText : pre.innerText;
Comment thread
joshbuchea marked this conversation as resolved.
Outdated
navigator.clipboard.writeText(text).then(function () {
button.textContent = 'Copied';
statusRegion.textContent = 'Copied to clipboard';
setTimeout(function () { button.textContent = 'Copy'; }, 1500);
}).catch(function () {
button.textContent = 'Failed';
statusRegion.textContent = 'Copy to clipboard failed';
setTimeout(function () { button.textContent = 'Copy'; }, 1500);
});
});

pre.appendChild(button);
})(preBlocks[j]);
Comment thread
joshbuchea marked this conversation as resolved.
Outdated
}
</script>
{% include analytics.html %}
</body>
</html>
50 changes: 49 additions & 1 deletion main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -319,7 +319,7 @@ pre > code:focus {
} */

/* Code */
/* .highlight .hll { background-color: #ffc;
/* .highlight .hll { background-color: #ffc;
.highlight .c { color: #999; }
.highlight .err { color: #a00; background-color: #faa }
.highlight .k { color: #069; }
Expand Down Expand Up @@ -699,3 +699,51 @@ pre.highlight {
.highlight .gi {
color: #a6e22e;
}

/* Copy to clipboard button */
pre {
position: relative;
}

.copy-btn {
position: absolute;
top: 8px;
right: 8px;
Comment on lines +709 to +711

@joshbuchea joshbuchea May 19, 2026

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch. I’d prefer to avoid sticky if possible, so let’s move the button outside the scrollable element instead. That’s how GitHub handles copy buttons in code blocks. It’s a slightly bigger change, but I think it’s worth it here.

@mattsafaii mattsafaii May 20, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense to go with the wrapper approach instead of sticky. The JS wraps each <pre> in a .pre-wrapper div at runtime, then positions the button on the wrapper so it stays pinned when the code block scrolls horizontally. I tested it on the long meta tags block and the button holds its position now.

min-width: 60px;
padding: 4px 10px;
font-family: inherit;
font-size: 12px;
color: #abb2bf;
background: transparent;
border: 1px solid #abb2bf;
border-radius: 4px;
cursor: pointer;
opacity: 0;
text-align: center;
transition: opacity 0.15s ease-in-out;
Comment thread
joshbuchea marked this conversation as resolved.
}

pre:hover .copy-btn,
.copy-btn:focus {
opacity: 1;
}
Comment thread
joshbuchea marked this conversation as resolved.

.copy-btn:hover {
background: rgba(171, 178, 191, 0.1);
}

@media (hover: none) {
.copy-btn {
opacity: 1;
}
}

.visually-hidden {
clip-path: inset(50%);
height: 1px;
width: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
}