@shikijs/rehype
rehype plugin for Shiki.
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.)