Syntax highlighting 1.2.2

Token-based syntax highlighting without Prism or CDN. OKLCH token colors, lazy in-view highlighting, and velin-code-block. Deutsch: Syntax-Highlighting Leitfaden

When to use

• Tokenize pre/code or <velin-code-block> without Prism/CDN.
• Enable via bootFromDOM(document, { highlight: true }) or initHighlight().

When not

• Do not expect full IDE-grade highlighting for every language — lexers are intentionally small.
• Register custom languages with registerLanguage when needed.

Overview

• core/highlight/ — highlightElement, initHighlight, registerLanguage
• Lazy load lexers when blocks scroll into view (IntersectionObserver)
• Attribute bridge: velin-code + language

Languages

Each lexer is a separate module, loaded only when a block using it comes into view.

A language- prefix is accepted everywhere, so class="language-rust" resolves the same as rust. Call velinSyntax.listLanguages() for the current list at runtime. Anything unrecognised falls back to unstyled plain text rather than failing.

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

YAML notes

Mapping keys use the attr-name token so they stay distinguishable from string values, and block scalar headers (|, >), anchors (&name) and aliases (*name) are tokenised as operators.

Custom languages

Register your own lexer for anything not listed. A lexer takes source text and returns tokens; token types map onto the velin-token--* classes.

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 attribute

<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>

Load with bootFromDOM(document, { attributes: true, highlight: true }).