# unified / rehype (/integrations/unified-rehype)

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

This is the base integration underneath MDX, Next.js MDX, and many other content pipelines.

If your system already uses `unified`, use `@lumis-sh/rehype-lumis` directly.

## Install

```bash
npm install unified remark-parse \
  remark-rehype rehype-stringify
npm install @lumis-sh/rehype-lumis \
  @lumis-sh/lumis @lumis-sh/themes \
  @lumis-sh/wasm-javascript @lumis-sh/wasm-rust
```

## Example

```ts
import {unified} from 'unified'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import rehypeStringify from 'rehype-stringify'
import rehypeLumis from '@lumis-sh/rehype-lumis'
import {htmlInline} from '@lumis-sh/lumis/formatters'
import plaintext from '@lumis-sh/lumis/langs/plaintext'
import javascript from '@lumis-sh/wasm-javascript'
import rust from '@lumis-sh/wasm-rust'
import latte from '@lumis-sh/themes/catppuccin_latte'

const file = await unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypeLumis, {
    formatter: (language) =>
      htmlInline({language, theme: latte}),
    languages: [javascript, rust, plaintext],
  })
  .use(rehypeStringify)
  .process(markdown)

const html = String(file)
```

`rehype-lumis` runs after `remark-rehype` and before `rehype-stringify`.