@shikijs/markdown-it

markdown-it plugin for Shiki.

Install

# npm
npm i -D @shikijs/markdown-it

# yarn
yarn add -D @shikijs/markdown-it

# pnpm
pnpm add -D @shikijs/markdown-it

# bun
bun add -D @shikijs/markdown-it

# deno
deno add npm:@shikijs/markdown-it

Usage

import Shiki from '@shikijs/markdown-it';
import MarkdownIt from 'markdown-it';

const md = MarkdownIt().use(
  await Shiki({
    themes: {
      light: 'vitesse-light',
      dark: 'vitesse-dark',
    },
  })
);

Fine‑grained Bundle

If you are using a fine‑grained bundle, import from @shikijs/markdown-it/core and pass your own highlighter:

import { fromHighlighter } from '@shikijs/markdown-it/core';
import MarkdownIt from 'markdown-it';
import { createHighlighterCore } from 'shiki/core';
import { createOnigurumaEngine } from 'shiki/engine/oniguruma';

const highlighter = await createHighlighterCore({
  themes: [import('@shikijs/themes/vitesse-light')],
  langs: [import('@shikijs/langs/javascript')],
  engine: createOnigurumaEngine(() => import('shiki/wasm')),
});

const md = MarkdownIt().use(
  fromHighlighter(highlighter, /* options */)
);

With Shorthands

Shiki’s shorthands provide on‑demand loading of themes and languages, but the highlighting process is asynchronous. markdown-it does not support async highlighting out of the box.
Use markdown‑it‑async and Shiki’s integration:

import { fromAsyncCodeToHtml } from '@shikijs/markdown-it/async';
import MarkdownItAsync from 'markdown-it-async';
import { codeToHtml } from 'shiki'; // or a custom shorthand bundle

// Initialize MarkdownIt instance with markdown‑it‑async
const md = MarkdownItAsync();

md.use(
  fromAsyncCodeToHtml(codeToHtml, {
    // options
  })
);

(Additional documentation, examples, and API details can be found in the source repository and the Shiki guide.)