Integrations
Astro
Use Lumis in Astro markdown and MDX through rehype-lumis.
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
npm install @lumis-sh/rehype-lumis \
@lumis-sh/lumis @lumis-sh/themes \
@lumis-sh/wasm-bundle-webIf you use MDX files too:
npm install @astrojs/mdxAstro markdown
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
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.