Codeblock 0.9.0

Das <velin-code-block> Web Component umschließt Quelltext mit VelinHighlight-Tokenfarben, optionalen Zeilennummern, Zeilen-Hervorhebungen, Kopieren und Collapse. English: Codeblock

Reifegrad: Dokumentiert als stabil in VelinStyle 1.2.0. Design Intelligence (Plan / Review / Agent-Meta) ist separat und Beta / Foundation wo vermerkt.

Wann verwenden

Syntax-hervorgehobene Codebeispiele mit <velin-code-block> in Docs oder Produkt-UI.
When line highlights or the documented attributes on this page match your snippet needs.

Wann nicht

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

Siehe auch Syntax-Highlighting-Guide und generierte velin-code-block.md.

Basis

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

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

Attribute

Attribut	Hinweise
`language`	Lexer-ID: `js`, `ts`, `html`, `css`, `php`, `blade`, …
`line-numbers`	Zeigt Gutter-Nummern
`highlight`	Bereiche z. B. `1-2,5`
`collapsed`	Toolbar Expand/Collapse

Zeilen-Hervorhebungen

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

Laden

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

Stelle sicher, dass Code als auswählbarer Text verfügbar ist (nicht nur als Bild).
If you add a copy control, give it an accessible name (see also Kopieren).