kt-code

A block of code on a recessed surface, with its language and a copy button.

Set neither language nor copy and the header disappears entirely — a bare block for a one-line command.

Highlighting is yours

The element owns the chrome — surface, language label, scrolling, copy — and nothing else. Slot in whatever markup a highlighter produced:

A design system that bundled a syntax highlighter would be choosing your bundle size and your language set for you. This one does not, which is also why language is purely a label: it says what the code is, it does not parse it.

Style the highlighter's classes from the token layer and they follow the theme:

Against <kt-badge variant="code">

<kt-badge variant="code"> is for a token inside a sentence — an identifier, a property name, a custom property. <kt-code> is for a block. Both draw on --surface-code, so they read as the same material at two scales.

Copying

copy adds the button; pressing it writes code — the block's plain text, with the leading and trailing newlines a template literal leaves behind removed — and confirms for a second and a half.

A clipboard that refuses, because permission was denied or the page is not on a secure origin, is swallowed: failing loudly over a convenience button helps nobody. kt-copy fires either way, so a caller that cares can tell.

Accessibility

The <pre> is a tab stop, because it scrolls: a block of code that can only be scrolled with a pointer is unreadable without one. Give it a label when the language alone does not say what it is.

API