Integrations
react-markdown
Use Lumis in react-markdown with rehype-lumis.
react-markdown already supports rehypePlugins, so Lumis fits naturally through @lumis-sh/rehype-lumis.
Install
npm install react-markdown
npm install @lumis-sh/rehype-lumis \
@lumis-sh/lumis @lumis-sh/themes \
@lumis-sh/wasm-bundle-webServer-side rendering
rehype-lumis is async, so use MarkdownAsync for server rendering:
import {MarkdownAsync} from 'react-markdown'
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'
export async function Article({source}: {source: string}) {
return (
<MarkdownAsync
rehypePlugins={[[rehypeLumis, {
formatter: (language) =>
htmlInline({language, theme: latte}),
languages: [web],
}]]}
>
{source}
</MarkdownAsync>
)
}Client-side rendering
For client-side rendering (e.g. with Vite), use MarkdownHooks instead:
import {MarkdownHooks} from 'react-markdown'
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'
function Article({source}: {source: string}) {
return (
<MarkdownHooks
rehypePlugins={[[rehypeLumis, {
formatter: (language) =>
htmlInline({language, theme: latte}),
languages: [web],
}]]}
>
{source}
</MarkdownHooks>
)
}MarkdownAsync is for React Server Components. MarkdownHooks uses useEffect internally and works in any client-side React app.