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

Open
mattsafaii wants to merge 5 commits into
base: gh-pages
Choose a base branch
from
+88 −2
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 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
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
41 changes: 40 additions & 1 deletion _layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@
{{ content }}
</div>
</div>

<div class="visually-hidden" aria-live="polite" role="status"></div>

<script>
// open external links in new tab
var links = document.links;
Expand All @@ -25,6 +26,44 @@
}
}
</script>
<script>
// copy to clipboard button on code blocks
if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
var statusRegion = document.querySelector('[aria-live="polite"][role="status"]');
var preBlocks = document.querySelectorAll('pre');
var preBlocksLength = preBlocks.length;
Comment on lines +33 to +34
var j;
for (j = 0; j < preBlocksLength; j++) {
(function (pre) {
var wrapper = document.createElement('div');
wrapper.className = 'pre-wrapper';
Comment on lines +38 to +39
pre.parentNode.insertBefore(wrapper, pre);
wrapper.appendChild(pre);

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.textContent || '') : (pre.textContent || '');
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);
});
Comment on lines +51 to +59
});

wrapper.appendChild(button);
})(preBlocks[j]);
}
}
</script>
{% include analytics.html %}
</body>
</html>
49 changes: 48 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,50 @@ pre.highlight {
.highlight .gi {
color: #a6e22e;
}

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

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

@joshbuchea joshbuchea May 19, 2026

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.

Copy link
Copy Markdown
Author

@mattsafaii mattsafaii May 20, 2026

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 on lines +721 to +723
Copy link
Copy Markdown
Author

@mattsafaii mattsafaii May 15, 2026

Choose a reason for hiding this comment

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

Good catch. Fixed in the latest commit:

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

}

.pre-wrapper:hover .copy-btn,
.copy-btn:focus {
opacity: 1;
}
Comment on lines +708 to +729

.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;
}
Loading