Code snippet

How to use it

Use in documentation or a README page for a short, complete snippet that people will paste. For a single command inline in a sentence, use a plain <code> element; for long files, link to the file instead. Escape < and & in the code as &lt; and &amp;, change the file name and language label, and note that browsers only allow the Clipboard API on secure (https) pages.

Accessibility

The snippet is a role="group" named by its file name and language through aria-labelledby, with the code in <pre><code> so whitespace and reading order are kept. Copy is a native <button> that writes to the clipboard, falls back to selecting the code (and copying where the browser still allows it), and reports the outcome in a role="status" line, so the result is announced instead of shown only as an icon change. Long lines scroll inside the block rather than the page. Code is #e2e8f0 on #0f172a (14.48:1), the header #0f172a on #f1f5f9 (16.30:1), the language label #334155 on #f1f5f9 (9.45:1) and the button white on #1d4ed8 (6.70:1, 8.72:1 hovered), with a 2px #1d4ed8 focus outline.

Source (copy-ready)

Copy code

<div class="dcl-code" role="group" aria-labelledby="dcl-code-file dcl-code-lang">
  <div class="dcl-code__header">
    <p class="dcl-code__caption"><span class="dcl-code__file" id="dcl-code-file">debounce.js</span> <span class="dcl-code__lang" id="dcl-code-lang">JavaScript</span></p>
    <button type="button" class="dcl-code__copy">Copy<span class="dcl-code__sr"> code</span></button>
  </div>
  <pre class="dcl-code__pre"><code class="dcl-code__code">export function debounce(callback, waitMs = 250) {
  let timer;
  return (...args) =&gt; {
    clearTimeout(timer);
    timer = setTimeout(() =&gt; callback(...args), waitMs);
  };
}</code></pre>
  <p class="dcl-code__status" role="status"></p>
</div>
<style>
.dcl-code { max-width: 40rem; min-width: 0; margin: 0; border: 1px solid #cbd5e1; border-radius: 0.5rem; overflow: hidden; font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-code__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0.5rem 0.4rem 0.9rem; border-bottom: 1px solid #cbd5e1; color: #0f172a; background-color: #f1f5f9; }
.dcl-code__caption { margin: 0; min-width: 0; overflow-wrap: anywhere; color: #0f172a; background-color: #f1f5f9; }
.dcl-code__file { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 600; color: #0f172a; background-color: #f1f5f9; }
.dcl-code__lang { margin-left: 0.5rem; padding: 0.05rem 0.45rem; border: 1px solid #94a3b8; border-radius: 999px; font-size: 0.8rem; color: #334155; background-color: #f1f5f9; }
.dcl-code__copy { padding: 0.3rem 0.8rem; border: none; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer; color: #ffffff; background-color: #1d4ed8; }
.dcl-code__copy:hover { color: #ffffff; background-color: #1e40af; }
.dcl-code__copy:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.dcl-code__pre { margin: 0; padding: 1rem; max-width: 100%; overflow-x: auto; font-size: 0.875rem; line-height: 1.55; color: #e2e8f0; background-color: #0f172a; }
.dcl-code__code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; color: #e2e8f0; background-color: #0f172a; }
.dcl-code__status { margin: 0; padding: 0 0.9rem; font-size: 0.85rem; color: #334155; background-color: #ffffff; }
.dcl-code__status:empty { padding: 0; }
.dcl-code__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
</style>
<script>
(function () {
  document.querySelectorAll(".dcl-code").forEach(function (root) {
    if (root.dataset.dclBound) { return; }
    root.dataset.dclBound = "true";
    var button = root.querySelector(".dcl-code__copy");
    var code = root.querySelector(".dcl-code__code");
    var status = root.querySelector(".dcl-code__status");
    if (!button || !code) { return; }
    function report(text) { if (status) { status.textContent = text; status.style.padding = "0.5rem 0.9rem"; } }
    function fallback() {
      var range = document.createRange();
      range.selectNodeContents(code);
      var selection = window.getSelection();
      selection.removeAllRanges();
      selection.addRange(range);
      var copied = false;
      try { copied = document.execCommand("copy"); } catch (error) { copied = false; }
      report(copied ? "Copied to clipboard." : "Code selected. Press Ctrl+C, or Command+C on a Mac, to copy it.");
    }
    button.addEventListener("click", function () {
      var text = code.textContent;
      if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(text).then(function () { report("Copied to clipboard."); }, fallback);
      } else {
        fallback();
      }
    });
  });
})();
</script>