Astro

Full example on GitHub

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

If you use MDX files too:

npm install @astrojs/mdx

Astro markdown

import {defineConfig} from 'astro/config'
import rehypeLumis from '@lumis-sh/rehype-lumis'
import {htmlInline} from '@lumis-sh/lumis/formatters'
import {bundledLanguages} from '@lumis-sh/lumis/bundles/web'
import githubLight from '@lumis-sh/themes/github_light'

export default defineConfig({
  markdown: {
    rehypePlugins: [
      [rehypeLumis, {
        formatter: (language) => htmlInline({language, theme: githubLight}),
        languages: [bundledLanguages],
      }],
    ],
  },
})

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 {bundledLanguages} from '@lumis-sh/lumis/bundles/web'
import githubLight from '@lumis-sh/themes/github_light'

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

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