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.

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