rehype-lumis

Full example on GitHub

Use @lumis-sh/rehype-lumis when your stack already has a rehype stage.

Install

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

Example

import rehypeLumis from '@lumis-sh/rehype-lumis'
import {htmlInline} from '@lumis-sh/lumis/formatters'
import javascript from '@lumis-sh/lumis/langs/javascript'
import plaintext from '@lumis-sh/lumis/langs/plaintext'
import latte from '@lumis-sh/themes/catppuccin_latte'

processor.use(rehypeLumis, {
  formatter: (language) => htmlInline({language, theme: latte}),
  languages: [javascript, plaintext],
})

This plugin replaces pre > code blocks in HAST with Lumis HTML output.

Full pipeline

import {unified} from 'unified'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import rehypeStringify from 'rehype-stringify'
import rehypeLumis from '@lumis-sh/rehype-lumis'
import {htmlInline} from '@lumis-sh/lumis/formatters'
import javascript from '@lumis-sh/lumis/langs/javascript'
import rust from '@lumis-sh/lumis/langs/rust'
import plaintext from '@lumis-sh/lumis/langs/plaintext'
import latte from '@lumis-sh/themes/catppuccin_latte'

const file = await unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypeLumis, {
    formatter: (language) => htmlInline({language, theme: latte}),
    languages: [javascript, rust, plaintext],
  })
  .use(rehypeStringify)
  .process(markdown)

Options

• formatter - required callback that receives the detected block language and returns a Lumis formatter
• languages - optional language definitions to register up front with createHighlighter

Behavior

• visits pre elements in HAST whose first child is a code element
• reads languages from language-* classes on the <code> or <pre> node, or from data-language / language properties
• replaces each block with Lumis HTML output
• preserves authored properties on the <pre> and <code> elements, including classes, styles, ids, ARIA attributes, and data attributes, by handing them to the formatter as preAttrs and codeAttrs so class unions and style appends exactly once
• keeps anything the authored <pre> held after its <code>, such as a copy button another plugin added
• loads whatever language a fence names, the same as every other runtime, so languages is a prefetch list rather than an allow-list
• a fence naming a language that cannot be loaded leaves that block unhighlighted; the rest of the document still renders

Use it in:

• unified
• MDX pipelines
• Next.js MDX
• Astro markdown and MDX
• react-markdown