Octane Integration

@tanstack/highlight/octane supports direct Octane components and @octanejs/mdx. It has no Octane runtime dependency and does not register languages automatically.

Shared highlighter

Create the same selective highlighter used by the rest of the application:

// src/highlight.ts
import { createHighlighter } from '@tanstack/highlight/core'
import { css } from '@tanstack/highlight/languages/css'
import { js } from '@tanstack/highlight/languages/js'
import { ts } from '@tanstack/highlight/languages/ts'
import { tsrx } from '@tanstack/highlight/languages/tsrx'
import { tsx } from '@tanstack/highlight/languages/tsx'

export const highlighter = createHighlighter({
  languages: [css, js, ts, tsrx, tsx],
})

Octane MDX

createOctaneMdxHighlight() returns the synchronous rehype-plugin tuple expected by @octanejs/mdx:

// vite.config.ts
import { octaneMdx } from '@octanejs/mdx/vite'
import { createOctaneMdxHighlight } from '@tanstack/highlight/octane'
import { highlighter } from './src/highlight'

export default {
  plugins: [
    octaneMdx({
      rehypePlugins: [
        createOctaneMdxHighlight({ highlighter }),
      ],
    }),
  ],
}

The plugin replaces Markdown <pre><code class="language-*"> nodes with structured highlighted HAST. It emits no raw HTML and works in both compileMdx() and compileMdxSync().

Add line numbers or application decorations through the same options as the Rehype adapter:

const highlight = createOctaneMdxHighlight({
  highlighter,
  lineNumbers: true,
  getTitle(node) {
    return node.properties?.dataTitle as string | undefined
  },
})

Because highlighting is synchronous and deterministic, separate Octane client and server compilations produce the same highlighted payload when they use the same package version, registry, and options. Theme changes remain CSS-only.

Direct components

createHighlightedCodeBlockProps() prepares escaped markup and Octane's dangerouslySetInnerHTML object together:

import {
  createHighlightedCodeBlockProps,
  type CreateHighlightedCodeBlockPropsOptions,
} from '@tanstack/highlight/octane'
import { highlighter } from './highlight'

type CodeBlockProps = Omit<
  CreateHighlightedCodeBlockPropsOptions,
  'highlighter'
>

export function CodeBlock(props: CodeBlockProps) @{
  const block = createHighlightedCodeBlockProps({
    ...props,
    highlighter,
  })

  <figure class={block.className}>
    @if (block.title) {
      <figcaption>{block.title}</figcaption>
    }
    <div dangerouslySetInnerHTML={block.dangerouslySetInnerHTML} />
  </figure>
}

The result also exposes copyText, lang, title, and tokens for application-owned controls. Do not add arbitrary unescaped HTML to dangerouslySetInnerHTML.__html.

Bundle behavior

The Octane entry imports renderer and Rehype helpers, but no language, theme, octane, or @octanejs/mdx code. Direct language subpaths remain the bundle-size control.