React API

@tanstack/highlight/react prepares code-block data for React components. It intentionally does not import React, render elements, own copy state, or inject CSS.

CreateHighlightedCodeBlockPropsOptions

type CreateHighlightedCodeBlockPropsOptions = {
  className?: string
  code: string
  decorations?: ReadonlyArray<HighlightDecoration>
  highlighter: Highlighter
  lang?: string
  lineNumbers?: boolean
  title?: string
}

HighlightedCodeBlockProps

RenderedCodeBlockData plus an optional className.

createHighlightedCodeBlockProps

function createHighlightedCodeBlockProps(
  options: CreateHighlightedCodeBlockPropsOptions,
): HighlightedCodeBlockProps

Calls highlighter.renderCodeBlockData and preserves className. It is deterministic and produces the same data during SSR and hydration.

tsx

import { createHighlightedCodeBlockProps } from '@tanstack/highlight/react'

function CodeBlock(input: Omit<CreateHighlightedCodeBlockPropsOptions, 'highlighter'>) {
  const block = createHighlightedCodeBlockProps({ ...input, highlighter })

  return (
    <figure className={block.className}>
      {block.title ? <figcaption>{block.title}</figcaption> : null}
      <div dangerouslySetInnerHTML={{ __html: block.htmlMarkup }} />
    </figure>
  )
}