@lumis-sh/react

React integration for Lumis syntax highlighting.

Docs: https://lumis.sh/docs

Examples:

• Vite React
• Next.js App Router

Install

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

Usage

Simple

import { CodeBlock } from '@lumis-sh/react'
import { htmlInline } from '@lumis-sh/lumis/formatters'
import githubLight from '@lumis-sh/themes/github_light'

export function Example() {
  return (
    <CodeBlock formatter={htmlInline({ language: 'javascript', theme: githubLight })}>
      {`const x = 1`}
    </CodeBlock>
  )
}

Reuse One Highlighter

import { CodeBlock } from '@lumis-sh/react'
import { createHighlighter } from '@lumis-sh/lumis'
import { bundledLanguages } from '@lumis-sh/lumis/bundles/web'
import { htmlInline } from '@lumis-sh/lumis/formatters'
import githubLight from '@lumis-sh/themes/github_light'

const highlighter = createHighlighter({ languages: [bundledLanguages] })

export function Example() {
  return (
    <CodeBlock
      highlighter={highlighter}
      formatter={htmlInline({ language: 'javascript', theme: githubLight })}
    >
      {`const x = 1`}
    </CodeBlock>
  )
}

Hook

Pass highlighter when you want to reuse one instance across multiple blocks or preload languages ahead of time.

import { useLumis } from '@lumis-sh/react'
import { createHighlighter } from '@lumis-sh/lumis'
import { bundledLanguages } from '@lumis-sh/lumis/bundles/web'
import { htmlInline } from '@lumis-sh/lumis/formatters'
import githubLight from '@lumis-sh/themes/github_light'

const highlighter = createHighlighter({ languages: [bundledLanguages] })

export function Example() {
  const { content, isLoading } = useLumis({
    children: 'const x = 1',
    formatter: htmlInline({ language: 'javascript', theme: githubLight }),
    highlighter,
  })

  if (isLoading) return null
  return content
}

Server rendering

import { renderCodeBlock } from '@lumis-sh/react/server'
import { bundledLanguages } from '@lumis-sh/lumis/bundles/web'
import { htmlInline } from '@lumis-sh/lumis/formatters'
import githubLight from '@lumis-sh/themes/github_light'

const node = await renderCodeBlock({
  children: 'const x = 1',
  formatter: htmlInline({ language: bundledLanguages.javascript, theme: githubLight }),
})