Code block 0.9.0

The <velin-code-block> Web Component wraps source text with VelinHighlight token colors, optional line numbers, line highlights, copy, and collapse. Deutsch: Velin Code Block De

Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.

When to use

Syntax-highlighted code samples with <velin-code-block> in docs or product UI.
When line highlights or the documented attributes on this page match your snippet needs.

When not

Inline code in prose — use a simple <code> element.
Full IDE editing — this is a display/highlight block, not a code editor.

See also Syntax highlighting guide and generated velin-code-block.md.

Basic

const greet = (name) => `Hello, ${name}!`; console.log(greet('Velin'));

<velin-code-block language="js" line-numbers>
const greet = (name) => `Hello, ${name}!`;
</velin-code-block>

Attributes

Attribute	Notes
`language`	Lexer id: `js`, `ts`, `html`, `css`, `php`, `blade`, …
`line-numbers`	Show gutter numbers
`highlight`	Ranges e.g. `1-2,5`
`collapsed`	Toolbar expand/collapse

Line highlights

.btn { padding: 0.5rem 1rem; } .btn--primary { background: var(--velin-color-primary); }

Loading

import { register, bootFromDOM } from '@birdapi/velinstyle';
await register(['velin-code-block', 'velin-copy']);
await bootFromDOM(document, { highlight: true });

Ensure code is available as selectable text (not only as an image).
If you add a copy control, give it an accessible name (see also Copy).