Code block

A code block with its header (the file name or whatever it is), line numbers if requested, highlighted lines and a copy button. It does not color the syntax, on purpose: that would be a whole highlighter as a dependency.

When to use it

• Documentation, integration examples, API responses, terminal commands.
• title for what it is ("LineaDeCarrito.tsx", "Response", "Terminal") and language as a small label next to it.
• numberLines and highlight (line numbers, starting at 1) when specific lines are going to be discussed.
• withoutCopy removes the copy button.

When not to

• A single piece of data to copy (an IBAN, a tracking code): Copyable.
• A single-use code that gets typed in: CodeField.

Keyboard: Tab reaches the copy button and then the block itself, which is focusable: with focus inside, the arrow keys scroll it horizontally to read long lines.

Accessibility: the block is named by its title ("Code" if there is none) and the button by what it copies ("Copy LineaDeCarrito.tsx"). When copying, it says so with text in a role="status" ("Code copied"), and if the clipboard fails it says that too ("Could not copy") instead of pretending. The line numbers and the language label are not read.

Fine-tuning: CSS variables --amset-block-code-*: -font, -gap, -language, -line, -number, -padding, -radius, -title. The size changes the code font size, the padding and the gap of the line number.