Code Block

Displays code snippets in a <pre><code> with a monospaced font, a subtle background, horizontal scrolling and optional line numbering. Use it to show code examples with a filename, language label and one-click copy to the clipboard. It is agent-native: each instance registers itself in window.__puraCodeBlocks (a Map keyed by id) exposing { el, getText, copy, language, filename }, and reflects its state on the host via data-pura-code-block, data-language, data-filename, data-lines and data-numbered, so an agent can read and copy the content without touching the shadow DOM.

Preview

<pura-code-block id="cb-demo" language="js" filename="greeting.js" numbered>function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("Andrew");</pura-code-block>

<script type="module">
  import "/pura/lib/code-block.js";
  document.getElementById("cb-demo").addEventListener("pura-copy", (e) => {
    console.log("Code copied:", e.detail.text);
  });
</script>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/code-block.js"></script>

import "./pura/lib/code-block.js";