Skip to content

installation.md

Latest commit

 

History

History
77 lines (55 loc) · 2.43 KB

installation.md

File metadata and controls

77 lines (55 loc) · 2.43 KB
Raw
title Installation

Installation

Install the package with your package manager:

pnpm add @tanstack/highlight
npm install @tanstack/highlight
yarn add @tanstack/highlight
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 Preconfigured API and core re-exports Bound helpers do; core-only imports can tree-shake
@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 18 KB gzip all-language build is acceptable:

import { highlight } from '@tanstack/highlight'

Importing only core helpers such as createHighlighter or escapeHtml from the root lets a compatible bundler remove the built-in language registry. Direct /core and /languages/<name> imports keep that separation explicit.

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.