Installation

Install the package with your package manager:

shell

pnpm add @tanstack/highlight

shell

npm install @tanstack/highlight

shell

yarn add @tanstack/highlight

shell

bun add @tanstack/highlight

Requirements

Node.js 18 or newer for server-side rendering and build tooling
An ESM-capable runtime or bundler
No framework peer dependency

The package is ESM-only and has no runtime dependencies.

Entry points

Import	Purpose	Pulls all languages?
@tanstack/highlight	Convenient preconfigured API	Yes
@tanstack/highlight/core	Registry and renderer primitives	No
@tanstack/highlight/languages/<name>	One language definition	No
@tanstack/highlight/languages	Aggregate language exports	Relies on tree shaking
@tanstack/highlight/theme	Theme CSS helpers	No
@tanstack/highlight/themes/<name>	One theme object	No
@tanstack/highlight/markdown	Fence metadata and HAST helpers	No
@tanstack/highlight/remark	Remark adapter	No
@tanstack/highlight/rehype	Rehype adapter	No
@tanstack/highlight/react	React-oriented data helper	No React dependency
@tanstack/highlight/octane	Octane component and MDX helpers	No Octane dependency

Recommended import style

Documentation sites should normally use the selective core:

import { createHighlighter } from '@tanstack/highlight/core'
import { css } from '@tanstack/highlight/languages/css'
import { tsx } from '@tanstack/highlight/languages/tsx'

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

The root entry is useful for prototypes, server-only scripts, or sites where the roughly 8 KB gzip all-language build is acceptable:

import { highlight } from '@tanstack/highlight'

TypeScript

Declarations ship with every public entry. No @types package is required.

Content Security Policy

The renderer does not inject scripts or inline color styles. Theme CSS can be generated at build time and placed in your normal stylesheet. Code text and decoration attribute values are escaped before rendering.