Prism.js Code Block with Copy Button — Free JS Snippet

<figure class="pc-block">
  <header class="pc-head">
    <span class="pc-file"><i></i><i></i><i></i> useDebounce.js</span>
    <span class="pc-hint" id="pcHint">Click a line number to highlight it</span>
    <button type="button" class="pc-copy" id="pcCopy" aria-live="polite">Copy</button>
  </header>
  <pre class="line-numbers" id="pcPre" data-line="4-6"><code class="language-javascript" id="pcCode">import { useEffect, useState } from 'react';

export function useDebounce(value, delay = 300) {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(id); // cancel on change or unmount
  }, [value, delay]);

  return debounced;
}</code></pre>
</figure>

body { background: #eef0f6; padding: 22px; font-family: system-ui, sans-serif; }
.pc-block { max-width: 640px; margin: 0 auto; border-radius: 14px; overflow: hidden; background: #2d2d2d; box-shadow: 0 16px 36px rgba(20,20,50,.25); }
.pc-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #232323; border-bottom: 1px solid #3a3a3a; }
.pc-file { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1 ui-monospace, Menlo, monospace; color: #c9c9c9; }
.pc-file i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.pc-file i:nth-child(2) { background: #febc2e; } .pc-file i:nth-child(3) { background: #28c840; margin-right: 6px; }
.pc-hint { margin-left: auto; font: 500 11.5px/1 system-ui, sans-serif; color: #8a8a8a; }
.pc-copy { font: 700 12px/1 system-ui, sans-serif; color: #e6e6e6; background: #3d3d3d; border: 0; border-radius: 7px; padding: 7px 12px; cursor: pointer; min-width: 64px; transition: background .15s; }
.pc-copy:hover { background: #4a4a4a; }
.pc-copy.done { background: #166534; color: #bbf7d0; }
.pc-block pre[class*="language-"], .pc-block pre { margin: 0; border-radius: 0; background: #2d2d2d; font-size: 13.5px; line-height: 1.65; padding: 14px 16px 14px 3.8em; }
/* the theme sets its own line-height on <code>; match it to the <pre> so the number gutter and highlight bars stay aligned */
.pc-block pre code[class*="language-"] { font-size: 13.5px; line-height: 1.65; }
.pc-block pre.line-numbers .line-numbers-rows { border-right-color: #444; }
.pc-block .line-numbers-rows > span { cursor: pointer; pointer-events: auto; }
.pc-block .line-numbers-rows > span::before { color: #7f7f7f; }
.pc-block .line-numbers-rows > span:hover::before { color: #fff; }
.pc-block .line-highlight { background: linear-gradient(to right, rgba(99,102,241,.32) 70%, rgba(99,102,241,0)); }

const pre = document.getElementById('pcPre');
const code = document.getElementById('pcCode');
let lines = new Set([4, 5, 6]);

// Prism draws highlights as absolutely positioned bars that it measures once. To change the
// highlighted lines, update data-line, remove the old bars, and ask the plugin to redraw them.
function paintLines() {
  const spec = Array.from(lines).sort(function (a, b) { return a - b; }).join(',');
  pre.setAttribute('data-line', spec);
  pre.querySelectorAll('.line-highlight').forEach(function (n) { n.remove(); });
  if (spec && Prism.plugins.lineHighlight) Prism.plugins.lineHighlight.highlightLines(pre)();
  document.getElementById('pcHint').textContent = lines.size
    ? 'Highlighted: ' + (lines.size === 1 ? 'line ' : 'lines ') + Array.from(lines).sort(function (a, b) { return a - b; }).join(', ')
    : 'Click a line number to highlight it';
}

// The number gutter is generated after highlighting, so delegate the click to the <pre>.
pre.addEventListener('click', function (e) {
  const row = e.target.closest('.line-numbers-rows > span');
  if (!row) return;
  const n = Array.prototype.indexOf.call(row.parentNode.children, row) + 1;
  if (lines.has(n)) lines.delete(n); else lines.add(n);
  paintLines();
});

// Copy the ORIGINAL text, not the highlighted markup: textContent strips the token <span>s.
const copyBtn = document.getElementById('pcCopy');
function flash(ok) {
  copyBtn.textContent = ok ? 'Copied!' : 'Press Ctrl+C';
  copyBtn.classList.toggle('done', ok);
  setTimeout(function () { copyBtn.textContent = 'Copy'; copyBtn.classList.remove('done'); }, 1600);
}
copyBtn.addEventListener('click', function () {
  const text = code.textContent;
  // The async clipboard API needs a secure context and permission; fall back to a hidden textarea.
  const fallback = function () {
    const ta = document.createElement('textarea');
    ta.value = text; ta.setAttribute('readonly', ''); ta.style.cssText = 'position:fixed;top:-100px;opacity:0';
    document.body.appendChild(ta); ta.select();
    let ok = false;
    try { ok = document.execCommand('copy'); } catch (err) { ok = false; }
    document.body.removeChild(ta);
    flash(ok);
  };
  if (navigator.clipboard && navigator.clipboard.writeText) {
    navigator.clipboard.writeText(text).then(function () { flash(true); }, fallback);
  } else fallback();
});

Prism.highlightElement(code);
paintLines();