# Docusaurus (/integrations/docusaurus)

[Full example on GitHub](https://github.com/leandrocp/lumis/tree/main/packages/javascript/rehype-lumis/examples/docusaurus)

Docusaurus docs use MDX and expose rehype plugin hooks in the docs plugin configuration.

## Install

```bash
npm install @lumis-sh/rehype-lumis \
  @lumis-sh/lumis @lumis-sh/themes \
  @lumis-sh/wasm-bundle-web
```

## Configure `docusaurus.config.mjs`

```js
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 default {
  presets: [
    [
      'classic',
      {
        docs: {
          rehypePlugins: [
            [rehypeLumis, {
              formatter: (language) =>
                htmlInline({language, theme: latte}),
              languages: [web],
            }],
          ],
        },
      },
    ],
  ],
}
```

## 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:

```js title="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.