This skill requires configure-selective-highlighting and integrate-markdown-pipelines. Read them first for registry and tree-transform behavior.

Integrate Framework Code Blocks

Integration Setup

Create the highlighter in an isomorphic module, then pass it into the adapter:

import { createHighlighter } from '@tanstack/highlight/core'
import { ts } from '@tanstack/highlight/languages/ts'
import { tsx } from '@tanstack/highlight/languages/tsx'
import { createHighlightedCodeBlockProps } from '@tanstack/highlight/react'

const highlighter = createHighlighter({ languages: [ts, tsx] })