Code block

Syntax highlighting is not this component’s job, and that is why the other examples on this page have none. A code block is a surface: a background, a family, a scroll container, a filename.

What colours the tokens inside it is a highlighter — Shiki, Prism, Highlight.js, a server — and every one of them emits its own <span>s. This preview is the docs being that consumer: Astro runs Shiki at build time with defaultColor={false}, which writes --shiki-light and --shiki-dark on each span and no color at all, and one rule in docs.css picks the one matching the current mode. The site therefore ships no tokeniser, no runtime and no extra request. The rule a highlighting theme has to follow is in this component’s docblock and it is one line: colour your tokens, leave the surface alone — no background, no font-family, no padding. A theme that repaints the box is a theme that undoes the component.

The <pre> is focusable and named for the same reason the table wrapper is: code must not wrap, so a long line scrolls, and a scroll container that is not focusable is unreachable without a pointer.

No caption, so the region is named directly. Keep the tabindex even on a short snippet — whether a line overflows depends on the reader’s window, not on yours.

The numbers are counter-increment on .code-line, drawn in a ::before that is user-select: none, so copying the block copies the code and not the numbers.

The slot says where, never what: copying is copy, with its permission prompt and its failure path.

With a .code-actions child the figure becomes a two-column grid, so the slot is as wide as whatever is in it and as tall — nothing is guessed. It reserves rather than overlays, and that is the repair: an absolutely positioned button in the corner was what this site had, another absolutely positioned strip landed on the same pixels with z-index: 1, and the copy button was unclickable on every example on the site. A slot in normal flow cannot be covered by something a page parks nearby.