Skip to main content

unified / rehype

Full example on GitHub

This is the base integration underneath MDX, Next.js MDX, and many other content pipelines.

If your system already uses unified, use @lumis-sh/rehype-lumis directly.

Install​

npm install unified remark-parse remark-rehype rehype-stringify

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

Example​

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 githubLight from '@lumis-sh/themes/github_light'



const file = await unified()

  .use(remarkParse)

  .use(remarkRehype)

  .use(rehypeLumis, {

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

    languages: [javascript, rust, plaintext],

  })

  .use(rehypeStringify)

  .process(markdown)



const html = String(file)

rehype-lumis runs after remark-rehype and before rehype-stringify.