# MDX (/integrations/mdx)

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

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

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

## With `@mdx-js/mdx`

```ts
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.