Octane API#

@tanstack/highlight/octane adapts highlighted block data to Octane components and adapts the Rehype transformer to @octanejs/mdx plugin configuration. It has no framework dependency.

Component data#

CreateHighlightedCodeBlockPropsOptions#

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

HighlightedCodeBlockProps#

type HighlightedCodeBlockProps = RenderedCodeBlockData & {
  className?: string
  dangerouslySetInnerHTML: { __html: string }
}

dangerouslySetInnerHTML.__html and htmlMarkup contain the same escaped <pre><code> tree.

createHighlightedCodeBlockProps#

function createHighlightedCodeBlockProps(
  options: CreateHighlightedCodeBlockPropsOptions,
): HighlightedCodeBlockProps

Calls highlighter.renderCodeBlockData, preserves className, and creates the raw-HTML payload accepted by Octane host elements. The result is deterministic across server rendering and hydration.

MDX plugin#

OctaneMdxHighlightOptions#

An alias of RehypeHighlightOptions. It requires an explicit highlighter and accepts lineNumbers, getDecorations, and getTitle.

OctaneMdxHighlightPlugin#

type OctaneMdxHighlightPlugin = [
  plugin: typeof rehypeHighlightCodeBlocks,
  options: OctaneMdxHighlightOptions,
]

A mutable Unified plugin tuple accepted inside the rehypePlugins array exposed by @octanejs/mdx.

createOctaneMdxHighlight#

function createOctaneMdxHighlight(
  options: OctaneMdxHighlightOptions,
): OctaneMdxHighlightPlugin

Returns [rehypeHighlightCodeBlocks, options]. The underlying transformer is synchronous, emits structured HAST, and skips already highlighted th-code blocks.

See the Octane guide for Vite, MDX, and direct-component examples.