Integrations
MDX
Use Lumis in MDX pipelines with rehype-lumis.
MDX is the best fit for @lumis-sh/rehype-lumis.
The pattern is simple: compile Markdown to HAST, let rehype-lumis replace each pre > code block with Lumis HTML, then continue your normal MDX pipeline.
Install
npm install @lumis-sh/rehype-lumis \
@lumis-sh/lumis @lumis-sh/themes \
@lumis-sh/wasm-bundle-webWith @mdx-js/mdx
import {compile} from '@mdx-js/mdx'
import rehypeLumis from '@lumis-sh/rehype-lumis'
import {htmlInline} from '@lumis-sh/lumis/formatters'
import web from '@lumis-sh/wasm-bundle-web'
import latte from '@lumis-sh/themes/catppuccin_latte'
const file = await compile(source, {
rehypePlugins: [
[rehypeLumis, {
formatter: (language) =>
htmlInline({language, theme: latte}),
languages: [web],
}],
],
})When to use this instead of markdown-it-lumis
Use rehype-lumis when your stack is built on unified or MDX directly:
@mdx-js/mdx- Next.js MDX setups
- Astro MDX setups
- custom unified pipelines
Use markdown-it-lumis when the host tool is built on markdown-it, like VitePress.
rehype-lumis is async because Lumis language loading is async.