react-markdown

Full example on GitHub

react-markdown already supports rehypePlugins, so Lumis fits naturally through @lumis-sh/rehype-lumis.

Install

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

Server-side rendering

rehype-lumis is async, so use MarkdownAsync for server rendering:

import {MarkdownAsync} from 'react-markdown'
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 async function Article({source}: {source: string}) {
  return (
    <MarkdownAsync
      rehypePlugins={[[rehypeLumis, {
        formatter: (language) => htmlInline({language, theme: githubLight}),
        languages: [bundledLanguages],
      }]]}
    >
      {source}
    </MarkdownAsync>
  )
}

Client-side rendering

For client-side rendering (e.g. with Vite), use MarkdownHooks instead:

import {MarkdownHooks} from 'react-markdown'
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'

function Article({source}: {source: string}) {
  return (
    <MarkdownHooks
      rehypePlugins={[[rehypeLumis, {
        formatter: (language) => htmlInline({language, theme: githubLight}),
        languages: [bundledLanguages],
      }]]}
    >
      {source}
    </MarkdownHooks>
  )
}

MarkdownAsync is for React Server Components. MarkdownHooks uses useEffect internally and works in any client-side React app.