Customize

Decorations#

Add source ranges and line wrappers to highlighted HTML.

Add classes to source ranges without touching syntax tokens. Optionally wrap each line for line numbers or annotations.

import { tokenize } from '@vortexlabs/kirari'
import { renderDecorated } from '@vortexlabs/kirari/decorations'

const source = 'const answer = 42\nconsole.log(answer)'
const html = renderDecorated(tokenize(source), {
  decorations: [
    { start: 6, end: 12, className: 'kirari-inserted' },
  ],
  lines: true,
})

Output: the first answer gets the inserted color; syntax colors stay.

const answer = 42
console.log(answer)

• Ranges: UTF-16 offsets, start inclusive, end exclusive. Overlaps combine classes.
• lines: true wraps each line in .kirari-line with a 1-based data-line. Line endings stay outside.
• lineClassName({ number, start, end }) adds a class per line.

Pass tokens that cover the whole source. Ranges must be nonempty, in bounds, and not split a surrogate pair. A range edge inside a CRLF needs lines: true. Output is escaped.