@shikijs/rehype | Shiki

ID: 1749https://shiki.matsu.io/packages/rehype
Source

@shikijs/rehype

rehype plugin for Shiki.

NPM version
NPM downloads
Source

github.com/shikijs/shiki/tree/main/packages/rehype

Install

# npm
npm i -D @shikijs/rehype
# yarn
yarn add -D @shikijs/rehype
# pnpm
pnpm add -D @shikijs/rehype
# bun
bun add -D @shikijs/rehype
# deno
deno add npm:@shikijs/rehype

Usage

import rehypeShiki from '@shikijs/rehype'
import rehypeStringify from 'rehype-stringify'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import { unified } from 'unified'

const file = await unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypeShiki, {
    // or `theme` for a single theme
    themes: {
      light: 'vitesse-light',
      dark: 'vitesse-dark',
    }
  })
  .use(rehypeStringify)
  .process(await fs.readFile('./input.md'))

The default export of @shikijs/rehype uses a shared instance of shiki from getSingletonHighlighter, which will persist across processes. If you want full control over the highlighter lifecycle, use Fine‑grained Bundle @shikijs/rehype/core instead.

Fine‑grained Bundle

By default, the full bundle of shiki will be imported. If you are using a fine‑grained bundle, you can import rehypeShikiFromHighlighter from @shikijs/rehype/core and pass your own highlighter:

import { rehypeShikiFromHighlighter } from '@shikijs/rehype/core'
import rehypeStringify from 'rehype-stringify'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import { createHighlighterCore } from 'shiki/core'
import { createOnigurumaEngine } from 'shiki/engine/oniguruma'
import { unified } from 'unified'

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

const raw = await fs.readFile('./input.md')
const file = await unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypeShikiFromHighlighter(highlighter))
  .use(rehypeStringify)
  .process(raw)

(The rest of the documentation continues with additional examples, API references, and configuration details.)