VelinHighlight 0.9.0 extension

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

Overview

• core/highlight/ — highlightElement, initHighlight, registerLanguage
• Lazy load lexers when blocks scroll into view (IntersectionObserver)
• Languages: JS, TS, HTML, CSS, JSON, Markdown, Shell, SQL
• Attribute bridge: velin-code + language

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 }).