Skip to main content

MDX

Full example on GitHub

MDX is the best fit for @lumis-sh/rehype-lumis.

The pattern is simple: compile Markdown to HAST, let rehype-lumis replace each pre > code block with Lumis HTML, then continue your normal MDX pipeline.

Install​

npm install @lumis-sh/rehype-lumis @lumis-sh/lumis @lumis-sh/themes

With @mdx-js/mdx​

import {compile} from '@mdx-js/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'



const file = await compile(source, {

  rehypePlugins: [

    [rehypeLumis, {

      formatter: (language) => htmlInline({language, theme: githubLight}),

      languages: [bundledLanguages],

    }],

  ],

})

When to use this instead of markdown-it-lumis​

Use rehype-lumis when your stack is built on unified or MDX directly:

  • @mdx-js/mdx
  • Next.js MDX setups
  • Astro MDX setups
  • custom unified pipelines

Use markdown-it-lumis when the host tool is built on markdown-it, like VitePress.

rehype-lumis is async because Lumis language loading is async.