quick-start.md

title	Quick Start

Quick Start

This setup creates a small isomorphic highlighter for common TypeScript documentation.

1. Create the highlighter

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

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

Registering js and css also lets html delegate <script> and <style> bodies to those tokenizers.

2. Highlight code

import { highlighter } from './highlight'

const result = highlighter.highlight(
  `export function Greeting() {
  return <h1>Hello</h1>
}`,
  { lang: 'tsx' },
)

document.querySelector('#example')!.innerHTML = result.html

Only insert result.html when it came directly from TanStack Highlight. The source code itself is escaped by the renderer.

3. Add a theme

Generate theme CSS during your build or application setup:

import { createThemeCss } from '@tanstack/highlight/theme'
import { githubDarkTheme } from '@tanstack/highlight/themes/github-dark'
import { githubLightTheme } from '@tanstack/highlight/themes/github-light'

export const highlightCss = createThemeCss({
  light: githubLightTheme,
  dark: githubDarkTheme,
  darkSelector: '.dark',
})

Add the returned CSS once. Theme changes do not require another highlighting pass.

Run the complete setup

This example registers the common documentation languages, highlights TSX, and applies the light or dark GitHub theme from the site.

import { createHighlighter } from '@tanstack/highlight/core'
import { css } from '@tanstack/highlight/languages/css'
import { html } from '@tanstack/highlight/languages/html'
import { js } from '@tanstack/highlight/languages/js'
import { ts } from '@tanstack/highlight/languages/ts'
import { tsx } from '@tanstack/highlight/languages/tsx'
import { createThemeCss } from '@tanstack/highlight/theme'
import { githubDarkTheme } from '@tanstack/highlight/themes/github-dark'
import { githubLightTheme } from '@tanstack/highlight/themes/github-light'

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

const source = [
  'type GreetingProps = { name: string }',
  '',
  'export function Greeting({ name }: GreetingProps) {',
  '  return <h1>Hello, {name}!</h1>',
  '}',
].join('\n')

const result = highlighter.highlight(source, { lang: 'tsx' })
const themeCss = createThemeCss({
  light: githubLightTheme,
  dark: githubDarkTheme,
  darkSelector: '.dark',
})

export default function render(output: HTMLElement) {
  const style = document.createElement('style')
  style.textContent = `${themeCss}
body { margin: 0; padding: 24px; font-family: ui-sans-serif, system-ui; }
pre.th-code { margin: 0; border: 1px solid color-mix(in srgb, currentColor 16%, transparent); border-radius: 12px; }
code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 14px; line-height: 1.6; }`

  document.head.append(style)
  output.innerHTML = result.html
}

4. Use the same module during SSR and hydration

// Server render
const serverHtml = highlighter.highlight(code, { lang }).html

// Client render for newly loaded content
const clientHtml = highlighter.highlight(code, { lang }).html

There is no initialization promise. Keep one highlighter instance at module scope and reuse it.

5. Add Markdown integration

For a unified pipeline, pass the same highlighter explicitly:

import { remarkHighlightCodeBlocks } from '@tanstack/highlight/remark'
import { highlighter } from './highlight'

const plugin = remarkHighlightCodeBlocks({ highlighter })

Next, read Language Registration, Themes, or Markdown Pipelines.