# VitePress (/integrations/vitepress)

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

VitePress uses `markdown-it` under the hood. That makes Lumis integration straightforward: override the markdown renderer's `highlight` function and let VitePress keep the rest of its code block UI.

## Install

```bash
npm install markdown-it \
  @lumis-sh/markdown-it-lumis @lumis-sh/themes \
  @lumis-sh/wasm-javascript @lumis-sh/wasm-rust
```

## Configure `.vitepress/config.ts`

```ts
import {defineConfig} from 'vitepress'
import markdownItLumis from '@lumis-sh/markdown-it-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 lumis = await markdownItLumis({
  formatter: (language) =>
    htmlInline({language, theme: latte}),
  languages: [javascript, rust, plaintext],
})

export default defineConfig({
  markdown: {
    async config(md) {
      lumis(md)
    },
  },
})
```

## Pick a different theme

Any `@lumis-sh/themes/*` theme module works.

```ts
import {defineConfig} from 'vitepress'
import markdownItLumis from '@lumis-sh/markdown-it-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 nightfly from '@lumis-sh/themes/nightfly'

const lumis = await markdownItLumis({
  formatter: (language) =>
    htmlInline({language, theme: nightfly}),
  languages: [javascript, rust, plaintext],
})

export default defineConfig({
  markdown: {
    async config(md) {
      lumis(md)
    },
  },
})
```

Load the languages you expect to render during setup.