Installation & Usage

Installation

Install via your package manager of choice.

# npm
npm install -D shiki

# yarn
yarn add -D shiki

# pnpm
pnpm add -D shiki

# bun
bun add -D shiki

# deno
deno add npm:shiki

See also: CDN Usage (not included in this excerpt).

Integrations

Shiki ships with a handful of ready‑made integrations:

• markdown-it Plugin
• Rehype Plugin
• TypeScript Twoslash Integration
• Monaco Editor Syntax Highlight
• CLI
• Common Transformers

Usage

Shorthands

The quickest way to highlight a snippet is to use the provided shorthand functions.
They load the required themes and languages on demand and cache them in memory.

import { codeToHtml } from 'shiki';

const code = 'const a = 1'; // input code

const html = await codeToHtml(code, {
  lang: 'javascript',
  theme: 'vitesse-dark'
});

console.log(html); // highlighted HTML string

Going a bit advanced, you can also use codeToTokens or codeToHast to get the intermediate data structure and render it yourself:

import { codeToTokens, codeToHast } from 'shiki';

const { tokens } = await codeToTokens('<div class="foo">bar</div>', {
  lang: 'html',
  theme: 'min-dark'
});

const hast = await codeToHast('.text-red { color: red; }', {
  lang: 'css',
  theme: 'catppuccin-mocha'
});

Highlighter Usage

The shorthand functions are asynchronous because they use WebAssembly and perform dynamic imports.
If you need to highlight code synchronously, create a highlighter instance first:

import { createHighlighter } from 'shiki';

const highlighter = await createHighlighter({
  themes: ['nord'],
  langs: ['javascript']
});

// later you can use it synchronously
const html = highlighter.codeToHtml('const a = 1', {
  lang: 'javascript',
  theme: 'nord'
});

Important Note
A highlighter instance should be a long‑lived singleton. Cache it somewhere and avoid creating it in hot functions or loops.
If you’re running on Node.js, the shorthands already manage the highlighter instance and dynamic loading for you.

You can load additional themes or languages after the highlighter has been created:

await highlighter.loadTheme('vitesse-light');
await highlighter.loadLanguage('css');

Since Shiki v1.0, all themes and languages must be loaded explicitly:

import { createHighlighter } from 'shiki';

const highlighter = await createHighlighter({
  themes: ['nord'],
  langs: ['javascript']
});