Skip to content

installation.md

Latest commit

 

History

History
75 lines (54 loc) · 2.15 KB

installation.md

File metadata and controls

75 lines (54 loc) · 2.15 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 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.