How to build a copy code snippet button and why it matters

Since 2025, I have been suffering from carpal tunnel syndrome. To ease the pain, I experimented with using my voice for coding, web browsing, and computer work. It’s not easy, and it’s hard to understand how hostile technology can be to people with mobility issues unless you experience it firsthand. Anyone who knows me knows that I've always been a strong supporter of accessible web and accessible practices, but this was the first time I'd experienced limited hand movement and I never realized it would take the minimum amount of effort from the user to accomplish importance of the task.

Using voice commands to highlight blocks of code and copy them is extremely difficult, at least not possible for me right now (either really impossible, or I just haven’t found a way yet). Web browsing and coding without hands on computer requires a lot of brainpower). Therefore, when writing about code, and especially when creating tutorials that involve readers copying and pasting code, it is absolutely necessary to provide a way for people with limited hand movement to copy code with one click .

Before I got carpal tunnel syndrome, I thought the copy code button was redundant. But I was wrong. So one of my first speech-based coding tasks was to add a copy code button to all code snippets in my blog posts. I'm working on another blog post about my journey with speech coding, but if you're interested, the tools I've been using are Talon and Cursorless in VSCode. Relearning how to do everything on the computer with voice has been a steep learning curve, but the whole process has taken some of the pain out of me. Yes, I wrote this blog post in voice whenever possible.

My copy snippet button solution was written in pure HTML, CSS and JavaScript in an Eleventy project using the JavaScript template engine (hence the use of string interpolation with curly braces).

HTML (and some preliminary JavaScript to build HTML)

In a blog post about code, you might have multiple code block snippets on a page. Therefore, you need to assign each code block a unique ID in order to locate the correct content to copy. You can generate unique IDs any way you like, such as using an external library, but this is what I do for each snippet at build time.

function makeId(length) {
  let result = "";
  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
  const charactersLength = characters.length;
  let counter = 0;
  while (counter < length) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
    counter += 1;
  }
  return result;
}

Given that formatted and syntax-highlighted code blocks will contain additional HTML and CSS classes to enhance formatting and highlighting, we need to ensure that the copy button only copies the original code content to the clipboard. My solution was to store the original code string in a meta tag for easy retrieval in JavaScript (versus stripping out redundant HTML tags; even then, we don't want to strip HTML tags from the HTML snippet!). You also need to use `encodeURIComponent` when storing raw code strings in meta tags so that the code does not execute on the page (e.g. JavaScript code). This meta tag is located next to every code block in my blog posts.

<meta data-code-id="${thisCodeID}" data-code-to-copy="${encodeURIComponent(codeSnippet)}"></meta>

Next, add a button next to or within the code block that references the unique identifier you created earlier. I also chose to add a small clipboard SVG icon next to the button text. If you choose to omit button text and just use an icon, be sure to use `aria-label` to ensure that the button has an accessible name that assistive technologies (such as screen readers) can understand (for example, "Copy snippet").

Copy

CSS style

I won’t dictate how to style this copy button in your own blog posts, but I chose to position it absolutely in the top right corner of each code block. Make sure you include focused, active, and focus-visible styles on your buttons to ensure that those who read your blog post without a mouse and use a keyboard or voice to navigate clickable elements clearly know which element is currently focused and has been clicked.

JavaScript code

Finally, use JavaScript to find each copy button on the page and add the following event listener for each button. This code gets the unique identifier of the original code snippet from the button, finds the relevant meta tag, and copies the original code stored in that meta tag to the clipboard. Make sure to use `decodeURIComponent` to copy the original code snippet to its original form.

function makeId(length) {
  let result = "";
  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
  const charactersLength = characters.length;
  let counter = 0;
  while (counter < length) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
    counter += 1;
  }
  return result;
}

This solution transfers well to your favorite front-end framework. Remember, temporary disabilities can happen to anyone; none of us are immortal.

The above is the detailed content of How to build a copy code snippet button and why it matters. For more information, please follow other related articles on the PHP Chinese website!