the home site for me: also iteration 3 or 4 of my site
feat: add copy code post
+226
2 changed files
content
templates
+225
content/blog/2025-03-18_adding-a-copy-button.md
+225
content/blog/2025-03-18_adding-a-copy-button.md
···
1
1
+
+++
2
2
+
title = "Adding a copy code button"
3
3
+
date = 2025-03-14
4
4
+
slug = "adding-a-copy-button"
5
5
+
description = "continuing the chain :)"
6
6
+
7
7
+
[taxonomies]
8
8
+
tags = ["accessibility"]
9
9
+
+++
10
10
+
11
11
+
It took me a little over a month but I finally continued the chain of adding copy code buttons to your code blocks. It started with Salma Alam-Naylor’s [post](https://whitep4nth3r.com/blog/how-to-build-a-copy-code-snippet-button/) which I saw on Hacker News but then [David Bushell](https://dbushell.com/2025/02/14/copy-code-button/) also posted on it and [Ragman](https://www.ragman.net/musings/copy_code/) made a bluesky post (sky? bloop? atproto bloop? honestly not sure what a more interesting name would be) and it's been saved in my mind since then that I should add it.
12
12
+
13
13
+
<!-- more -->
14
14
+
15
15
+
What finally pushed me over the edge was seeing the [Duckquill](https://duckquill.daudix.one) theme and its fancy code blocks. I cloned the theme (`git clone https://codeberg.org/daudix/duckquill.git`) and figured out that the actual copy code was some reasonably simple js in `static/copy-button.js`. I copied that file and messed with it a bit as well as the css (`sass/_pre-container.scss` and some icon stuff in `sass/_icon.scss`) to make it work with my theme and style.
16
16
+
17
17
+
A quick hash for cache busting and import later it all worked!
18
18
+
19
19
+
> templates/head.html
20
20
+
```html
21
21
+
{% set jsHash = get_hash(path="js/copy-button.js", sha_type=256,
22
22
+
base64=true) %}
23
23
+
<script
24
24
+
src="{{ get_url(path='js/copy-button.js?' ~ jsHash, trailing_slash=false) | safe }}"
25
25
+
defer
26
26
+
></script>
27
27
+
```
28
28
+
29
29
+
The one thing I expanded on was the ability to specify a file name / comment for the code block. When js is disabled a markdown `>` blockquote on the line before the code block will create a header tab for the code block. I snipped the header tab idea from [chevyray.dev](https://chevyray.dev) and I grew to quite like it so I didn't want to abandon it over a copy button.
30
30
+
31
31
+
Here is my code should you want to use it:
32
32
+
33
33
+
> static/js/copy-button.js
34
34
+
```js
35
35
+
// Based on https://www.roboleary.net/2022/01/13/copy-code-to-clipboard-blog.html
36
36
+
document.addEventListener("DOMContentLoaded", () => {
37
37
+
const blocks = document.querySelectorAll("pre[class^='language-']");
38
38
+
39
39
+
for (const block of blocks) {
40
40
+
if (navigator.clipboard) {
41
41
+
// Code block header title
42
42
+
const title = document.createElement("span");
43
43
+
const lang = block.getAttribute("data-lang");
44
44
+
const comment =
45
45
+
block.previousElementSibling &&
46
46
+
(block.previousElementSibling.tagName === "blockquote" ||
47
47
+
block.previousElementSibling.nodeName === "BLOCKQUOTE")
48
48
+
? block.previousElementSibling
49
49
+
: null;
50
50
+
if (comment) block.previousElementSibling.remove();
51
51
+
title.innerHTML =
52
52
+
lang + (comment ? ` (${comment.textContent.trim()})` : "");
53
53
+
54
54
+
// Copy button icon
55
55
+
const icon = document.createElement("i");
56
56
+
icon.classList.add("icon");
57
57
+
58
58
+
// Copy button
59
59
+
const button = document.createElement("button");
60
60
+
const copyCodeText = "Copy code"; // Use hardcoded text instead of getElementById
61
61
+
button.setAttribute("title", copyCodeText);
62
62
+
button.appendChild(icon);
63
63
+
64
64
+
// Code block header
65
65
+
const header = document.createElement("div");
66
66
+
header.classList.add("header");
67
67
+
header.appendChild(title);
68
68
+
header.appendChild(button);
69
69
+
70
70
+
// Container that holds header and the code block itself
71
71
+
const container = document.createElement("div");
72
72
+
container.classList.add("pre-container");
73
73
+
container.appendChild(header);
74
74
+
75
75
+
// Move code block into the container
76
76
+
block.parentNode.insertBefore(container, block);
77
77
+
container.appendChild(block);
78
78
+
79
79
+
button.addEventListener("click", async () => {
80
80
+
await copyCode(block, header, button); // Pass the button here
81
81
+
});
82
82
+
}
83
83
+
}
84
84
+
85
85
+
async function copyCode(block, header, button) {
86
86
+
const code = block.querySelector("code");
87
87
+
const text = code.innerText;
88
88
+
89
89
+
await navigator.clipboard.writeText(text);
90
90
+
91
91
+
header.classList.add("active");
92
92
+
button.setAttribute("disabled", true);
93
93
+
94
94
+
header.addEventListener(
95
95
+
"animationend",
96
96
+
() => {
97
97
+
header.classList.remove("active");
98
98
+
button.removeAttribute("disabled");
99
99
+
},
100
100
+
{ once: true },
101
101
+
);
102
102
+
}
103
103
+
});
104
104
+
```
105
105
+
106
106
+
and the css:
107
107
+
108
108
+
> sass/css/_copy-button.scss
109
109
+
```scss
110
110
+
i.icon {
111
111
+
display: inline-block;
112
112
+
mask-size: cover;
113
113
+
background-color: currentColor;
114
114
+
width: 1rem;
115
115
+
height: 1rem;
116
116
+
font-style: normal;
117
117
+
font-variant: normal;
118
118
+
line-height: 0;
119
119
+
text-rendering: auto;
120
120
+
}
121
121
+
122
122
+
.pre-container {
123
123
+
--icon-copy: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 3c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3 0 .55-.45 1-1 1s-1-.45-1-1c0-.57-.43-1-1-1H3c-.57 0-1 .43-1 1v5c0 .57.43 1 1 1 .55 0 1 .45 1 1s-.45 1-1 1c-1.645 0-3-1.355-3-3zm5 5c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3v5c0 1.645-1.355 3-3 3H8c-1.645 0-3-1.355-3-3zm2 0v5c0 .57.43 1 1 1h5c.57 0 1-.43 1-1V8c0-.57-.43-1-1-1H8c-.57 0-1 .43-1 1m0 0'/%3E%3C/svg%3E");
124
124
+
--icon-done: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.883 0q-.486.008-.965.074a7.98 7.98 0 0 0-4.602 2.293 8.01 8.01 0 0 0-1.23 9.664 8.015 8.015 0 0 0 9.02 3.684 8 8 0 0 0 5.89-7.75 1 1 0 1 0-2 .008 5.986 5.986 0 0 1-4.418 5.816 5.996 5.996 0 0 1-6.762-2.766 5.99 5.99 0 0 1 .922-7.25 5.99 5.99 0 0 1 7.239-.984 1 1 0 0 0 1.363-.371c.273-.48.11-1.09-.371-1.367A8 8 0 0 0 9.492.14 8 8 0 0 0 7.882 0m7.15 1.998-.1.002a1 1 0 0 0-.687.34L7.95 9.535 5.707 7.29A1 1 0 0 0 4 8a1 1 0 0 0 .293.707l3 3c.195.195.465.3.742.293.277-.012.535-.133.719-.344l7-8A1 1 0 0 0 16 2.934a1 1 0 0 0-.34-.688 1 1 0 0 0-.627-.248'/%3E%3C/svg%3E");
125
125
+
126
126
+
margin: 1rem 0 1rem;
127
127
+
border-radius: 0.75rem;
128
128
+
129
129
+
.header {
130
130
+
display: flex;
131
131
+
justify-content: space-between;
132
132
+
align-items: center;
133
133
+
border-radius: 0.2em 0.2em 0 0;
134
134
+
background-color: var(--accent);
135
135
+
background-size: 200%;
136
136
+
padding: 0.25rem;
137
137
+
height: 2.5rem;
138
138
+
139
139
+
span {
140
140
+
margin-inline-start: 0.75rem;
141
141
+
color: var(--purple-gray);
142
142
+
font-weight: bold;
143
143
+
line-height: 1;
144
144
+
}
145
145
+
146
146
+
button {
147
147
+
appearance: none;
148
148
+
transition: 200ms;
149
149
+
cursor: pointer;
150
150
+
border: none;
151
151
+
border-radius: 0.4rem;
152
152
+
background-color: transparent;
153
153
+
padding: 0.5rem;
154
154
+
color: var(--purple-gray);
155
155
+
line-height: 0;
156
156
+
157
157
+
&:hover {
158
158
+
background-color: color-mix(
159
159
+
in oklab,
160
160
+
var(--accent) 80%,
161
161
+
var(--purple-gray)
162
162
+
);
163
163
+
}
164
164
+
165
165
+
&:focus {
166
166
+
background-color: color-mix(
167
167
+
in oklab,
168
168
+
var(--accent) 80%,
169
169
+
var(--purple-gray)
170
170
+
);
171
171
+
}
172
172
+
173
173
+
&:active {
174
174
+
transform: scale(0.9);
175
175
+
}
176
176
+
177
177
+
&:disabled {
178
178
+
cursor: not-allowed;
179
179
+
180
180
+
&:active {
181
181
+
transform: none;
182
182
+
}
183
183
+
}
184
184
+
185
185
+
.icon {
186
186
+
-webkit-mask-image: var(--icon-copy);
187
187
+
mask-image: var(--icon-copy);
188
188
+
transition: 200ms;
189
189
+
190
190
+
:root[dir*="rtl"] & {
191
191
+
transform: scaleX(-1);
192
192
+
}
193
193
+
}
194
194
+
}
195
195
+
196
196
+
&.active {
197
197
+
button {
198
198
+
animation: active-copy 0.3s;
199
199
+
200
200
+
color: var(--purple-gray);
201
201
+
202
202
+
.icon {
203
203
+
-webkit-mask-image: var(--icon-done);
204
204
+
mask-image: var(--icon-done);
205
205
+
}
206
206
+
}
207
207
+
208
208
+
@keyframes active-copy {
209
209
+
50% {
210
210
+
transform: scale(0.9);
211
211
+
}
212
212
+
100% {
213
213
+
transform: none;
214
214
+
}
215
215
+
}
216
216
+
}
217
217
+
}
218
218
+
219
219
+
pre {
220
220
+
margin: 0;
221
221
+
box-shadow: none;
222
222
+
border-radius: 0 0 0.2em 0.2em;
223
223
+
}
224
224
+
}
225
225
+
```