# Astro (/integrations/astro)

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

Astro exposes markdown and MDX configuration through remark and rehype plugins. That makes `@lumis-sh/rehype-lumis` the clean Lumis integration point.

You can use the same plugin for both regular markdown content and Astro MDX.

## Install

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

If you use MDX files too:

```bash
npm install @astrojs/mdx
```

## Astro markdown

```ts
import {defineConfig} from 'astro/config'
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 defineConfig({
  markdown: {
    rehypePlugins: [
      [rehypeLumis, {
        formatter: (language) =>
          htmlInline({language, theme: latte}),
        languages: [web],
      }],
    ],
  },
})
```

## Astro MDX

```ts
import {defineConfig} from 'astro/config'
import mdx from '@astrojs/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'

export default defineConfig({
  integrations: [
    mdx({
      rehypePlugins: [
        [rehypeLumis, {
          formatter: (language) =>
            htmlInline({language, theme: latte}),
          languages: [web],
        }],
      ],
    }),
  ],
})
```

If you already use other Astro markdown plugins, keep `rehype-lumis` in the rehype stage.