Integrations
Docusaurus
Use Lumis in Docusaurus through MDX rehype plugins.
Docusaurus docs use MDX and expose rehype plugin hooks in the docs plugin configuration.
Install
npm install @lumis-sh/rehype-lumis @lumis-sh/lumis @lumis-sh/themes
Configure docusaurus.config.mjs
import rehypeLumis from '@lumis-sh/rehype-lumis'
import {htmlInline} from '@lumis-sh/lumis/formatters'
import {bundledLanguages} from '@lumis-sh/lumis/bundles/web'
import latte from '@lumis-sh/themes/catppuccin_latte'
export default {
presets: [
[
'classic',
{
docs: {
rehypePlugins: [
[rehypeLumis, {
formatter: (language) => htmlInline({language, theme: latte}),
languages: [bundledLanguages],
}],
],
},
},
],
],
}
Disable Prism
Docusaurus wraps code blocks with its built-in Prism CodeBlock component. To let Lumis handle all code rendering, override the pre and code MDX components so they pass through without Prism interference:
src/theme/MDXComponents.js
import MDXComponents from '@theme-original/MDXComponents'
export default {
...MDXComponents,
pre: (props) => <pre {...props} />,
code: (props) => <code {...props} />,
}
Do not set "type": "module" in package.json as it breaks Docusaurus's webpack SSR build.