Advanced

Rehype & MDX

Highlight code blocks while building Markdown and MDX documents.

@vortexlabs/kirari-rehype highlights code blocks in Markdown and MDX at build time. The browser gets plain HTML and CSS, no highlighter.

Different from Markdown fences: that highlights Markdown source. This plugin highlights code blocks in the rendered document.

Example

npm install @vortexlabs/kirari @vortexlabs/kirari-rehype

Example

import { unified } from 'unified'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import rehypeStringify from 'rehype-stringify'
import rehypeKirari from '@vortexlabs/kirari-rehype'
import { javascript } from '@vortexlabs/kirari/languages/javascript'

const processor = unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypeKirari, { languages: [javascript] })
  .use(rehypeStringify)

const markdown = '```js\nconst answer = 42\n```'
const html = String(await processor.process(markdown))

Pass the languages you need; labels like js resolve via the registry. Nothing is auto-loaded or detected. Skipped: unknown or unlabeled blocks, inline code, and code that already has child elements.

Use it with MDX

Example

import { compile } from '@mdx-js/mdx'
import rehypeKirari from '@vortexlabs/kirari-rehype'
import { javascript } from '@vortexlabs/kirari/languages/javascript'

const markdown = '```js\nconst answer = 42\n```'
const compiled = await compile(markdown, {
  rehypePlugins: [[rehypeKirari, { languages: [javascript] }]],
})

Import @vortexlabs/kirari/theme.css once. Blocks get pre.kirari and the usual .kirari-* classes and variables. Custom MDX code components must forward props and children.

Point readers to a line

A fence such as ```js {2,4-6} adds .kirari-line-highlighted to lines 2 and 4–6. Style it yourself:

Example

.kirari-line-highlighted {
  background: var(--kirari-line-background, #7452bd18);
}

Other options: lines: true wraps lines without metadata; lineClassName({ number, start, end }) (1-based, UTF-16 offsets within the block); classes and className(token) as in core. Full type: Options.

Order: after remark-rehype, before stringify. With rehype-sanitize, sanitize first and keep language classes. Don’t run a second highlighter on the same blocks. Invalid line metadata, and braces inside quoted meta values, are ignored.

Rehype & MDX#

Use it with MDX

Point readers to a line

Rehype & MDX