Decorations

We provide a decorations API allowing you to wrap custom classes and attributes around ranges of your code.

import { codeToHtml } from 'shiki';

const code = `const x = 10
console.log(x)`.trim();

const html = await codeToHtml(code, {
  theme: 'vitesse-light',
  lang: 'ts',
  decorations: [
    {
      // line and character are 0-indexed
      start: { line: 1, character: 0 },
      end: { line: 1, character: 11 },
      properties: { class: 'highlighted-word' }
    }
  ]
});

The result will be (styled with CSS in this example):

const x = 10
console.log(x)

Where the console.log(x) part is wrapped with a CSS class highlighted-word.

The positions can also be 0‑indexed offsets relative to the code:

const html = await codeToHtml(code, {
  theme: 'vitesse-light',
  lang: 'ts',
  decorations: [
    {
      start: 21,
      end: 24,
      properties: { class: 'highlighted-word' }
    }
  ]
});

It renders:

const x = 10
console.log(x)

with the log part highlighted.

Negative character positions denote characters from the end of a line, starting with the line end:

const item: DecorationItem = {
  start: { line: 0, character: 0 },
  end:   { line: 0, character: -1 },
  properties: { class: 'highlighted-word' }
};

This highlights the entire first line.

Use Decorations in Transformers

For advanced use cases, you can use the Transformers API to have full access to the tokens and the HAST tree.

Meanwhile, if you want to append decorations within a transformer, you can do that with:

import { codeToHtml, ShikiTransformer } from 'shiki';

const myTransformer: ShikiTransformer = async (tokens) => {
  // ...do something with tokens
  return tokens;
};