Syntax-Highlighting 1.2.0

Token-basiertes Syntax-Highlighting ohne Prism oder CDN. OKLCH-Tokenfarben, Lazy In-View Highlighting und velin-code-block. English: Syntax highlighting

Reifegrad

Dokumentiert als stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) ist getrennt und je nach Bereich als beta / foundation markiert.

Wann sinnvoll

pre/code oder <velin-code-block> ohne Prism/CDN tokenisieren.
Ueber bootFromDOM(document, { highlight: true }) oder initHighlight() aktivieren.

Wann nicht

Kein vollstaendiges IDE-Highlighting fuer jede Sprache erwarten - Lexer sind bewusst kompakt.
Bei Bedarf eigene Sprachen mit registerLanguage registrieren.

Ueberblick

core/highlight/ - highlightElement, initHighlight, registerLanguage
Lexer werden lazy geladen, wenn Bloecke in den Viewport kommen (IntersectionObserver)
Attribute-Bridge: velin-code + language

Sprachen

Jeder Lexer ist ein eigenes Modul und wird nur geladen, wenn ein Block mit dieser Sprache sichtbar wird.

Sprache	Akzeptierte Namen
JavaScript	`js`, `javascript`, `jsx`
TypeScript	`ts`, `typescript`, `tsx`
HTML	`html`, `markup`, `xml`, `svg`
CSS	`css`
JSON	`json`
Markdown	`md`, `markdown`
Shell	`shell`, `bash`, `sh`, `zsh`
SQL	`sql`
PHP	`php`, `blade`
Python	`python`, `py`, `python3`
YAML	`yaml`, `yml`
Go	`go`, `golang`
Rust	`rust`, `rs`
Klartext	`text`, `plain`, `txt`, `console`

Ein language--Praefix wird ueberall akzeptiert, also loest class="language-rust" genauso auf wie rust. velinSyntax.listLanguages() liefert die aktuelle Laufzeitliste. Unbekanntes faellt auf ungestylten Klartext zurueck statt Fehler zu werfen.

<velin-code-block language="python" line-numbers>
def greet(name: str = "world") -> None:
    print(f"hello {name}")
</velin-code-block>

YAML-Hinweise

Mapping-Keys nutzen das attr-name-Token, damit sie von String-Werten unterscheidbar bleiben. Block-Scalar-Header (|, >), Anchors (&name) und Aliase (*name) werden als Operatoren tokenisiert.

Eigene Sprachen

Fuer nicht gelistete Sprachen einen eigenen Lexer registrieren. Ein Lexer bekommt Quelltext und gibt Tokens zurueck; Token-Typen mappen auf velin-token--*-Klassen.

import { registerLanguage } from '@birdapi/velinstyle/highlight';

registerLanguage('toml', (code) => [{ type: 'plain', value: code }]);

JavaScript API

import { initHighlight, velinSyntax } from '@birdapi/velinstyle/highlight';

initHighlight(document);
// velinSyntax.highlightElement(document.querySelector('pre'));

HTML-Attribut

<pre velin-code="js" language="js"><code>const x = 42;</code></pre>

Web Component

<velin-code-block language="css" line-numbers highlight="1-2">
.btn { padding: 0.5rem 1rem; }
.btn--primary { background: var(--velin-color-primary); }
</velin-code-block>

Laden mit bootFromDOM(document, { attributes: true, highlight: true }).