@lumis-sh/rehype-lumis

rehype plugin for Lumis syntax highlighting.

Finds <pre><code class="language-*"> elements in the hast tree and replaces them with highlighted output.

Install

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

Quick start

import rehypeParse from 'rehype-parse'
import rehypeStringify from 'rehype-stringify'
import { unified } from 'unified'
import rehypeLumis from '@lumis-sh/rehype-lumis'
import { htmlInline } from '@lumis-sh/lumis/formatters'
import javascript from '@lumis-sh/lumis/langs/javascript'
import dracula from '@lumis-sh/themes/dracula'

const result = await unified()
  .use(rehypeParse, { fragment: true })
  .use(rehypeLumis, {
    formatter: (language) => htmlInline({ language, theme: dracula }),
    languages: [javascript],
  })
  .use(rehypeStringify)
  .process('<pre><code class="language-javascript">const x = 1</code></pre>')

console.log(String(result))

formatter receives the language detected from the code block and returns a Lumis Formatter. Any built-in or custom formatter works.

Each language is downloaded the first time a matching code block is found. Code blocks with unavailable languages are left unchanged.

Multiple themes

import { htmlMultiThemes } from '@lumis-sh/lumis/formatters'
import githubLight from '@lumis-sh/themes/github_light'
import githubDark from '@lumis-sh/themes/github_dark'

unified()
  .use(rehypeLumis, {
    formatter: (language) => htmlMultiThemes({
      language,
      themes: { light: githubLight, dark: githubDark },
    }),
    languages: [javascript],
  })

Using bundles

You can pass a bundle to make a group of languages available:

import { bundledLanguages } from '@lumis-sh/lumis/bundles/web'

unified()
  .use(rehypeLumis, {
    formatter: (language) => htmlInline({ language, theme: dracula }),
    languages: [bundledLanguages],
  })

Language detection

The plugin reads the language from (in order):

1. class="language-*" on the <code> element
2. class="language-*" on the <pre> element
3. data-language attribute on the <pre> element
4. language attribute on the <pre> element

If no language is detected, Lumis tries to guess from the content.

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | formatter | (language: string \| undefined) => Formatter | (required) | Creates a Lumis formatter for each code block | | languages | LanguageInput[] | [] | Languages to make available. Accepts Language objects or bundles. |