A blazing-fast, TypeScript-native syntax highlighter with comprehensive grammar support for modern web languages. Built for performance with both synchronous and asynchronous tokenization modes.
- ⚡ Blazing Fast - Highly optimized tokenization with async and sync modes for maximum performance
- 🎨 6 Languages - JavaScript/JSX, TypeScript/TSX, HTML, CSS, JSON, and STX
- 🔥 Modern Syntax - Full support for ES2024+, BigInt, numeric separators, optional chaining, and more
- ⚛️ JSX/TSX Support - Complete React and TypeScript JSX highlighting
- 🎯 CSS4 Features - Modern color functions (hwb, lab, lch, oklab, oklch), container queries, CSS layers
- 🧵 Dual Modes - Fast async mode and synchronous mode for different use cases
- 💪 TypeScript-First - Fully typed APIs with comprehensive type definitions
- 🧪 416 Tests - Extensively tested with high code coverage
- 📦 Zero Dependencies - Lightweight with no external runtime dependencies
npm install ts-syntax-highlighter
# or
bun add ts-syntax-highlighter
# or
pnpm add ts-syntax-highlighterimport { Tokenizer } from 'ts-syntax-highlighter'
// Create tokenizer instance
const tokenizer = new Tokenizer('javascript')
// Tokenize code (async mode - faster)
const tokens = await tokenizer.tokenizeAsync(`
const greeting = 'Hello World'
console.log(greeting)
`)
// Or use sync mode
const syncTokens = tokenizer.tokenize(`
function add(a: number, b: number): number {
return a + b
}
`)- ES2024+ features (BigInt, numeric separators, optional chaining, nullish coalescing)
- JSX elements and expressions
- Template literals with expressions
- Regex literals with all flags
- Async/await, generators
- Modern operators:
?.,??,?.[],?.()
- All JavaScript features plus:
- Type annotations and assertions
- Interfaces, types, enums
- Generics and type parameters
- TypeScript-specific operators:
is,keyof,infer - TSX (TypeScript + JSX)
- Utility types
- HTML5 elements
- Data attributes (
data-*) - ARIA attributes (
aria-*) - Event handlers (
onclick,onload, etc.) - HTML entities
- DOCTYPE declarations
- Modern color functions:
hwb(),lab(),lch(),oklab(),oklch(),color() - Math functions:
calc(),min(),max(),clamp(),round(),abs(),sign() - Trigonometric:
sin(),cos(),tan(),asin(),acos(),atan() - Gradients:
linear-gradient(),radial-gradient(),conic-gradient() - At-rules:
@media,@keyframes,@supports,@container,@layer,@property - CSS custom properties (variables):
--custom-property,var()
- Objects and arrays
- Strings with proper escape sequences
- Numbers (including scientific notation)
- Booleans and null
- Invalid escape detection
- Blade-like templating syntax
- 50+ directives
- Components, layouts, includes
- Control flow, loops
- Authentication, authorization
- And much more
ts-syntax-highlighter is built for speed with highly optimized tokenization algorithms:
| Operation | Fast Mode (Async) | Sync Mode |
|---|---|---|
| JavaScript tokenization | ~0.05ms | ~0.08ms |
| TypeScript tokenization | ~0.08ms | ~0.12ms |
| HTML tokenization | ~0.04ms | ~0.06ms |
| CSS tokenization | ~0.03ms | ~0.05ms |
- Fast Mode: Async tokenization with worker-like performance characteristics
- Sync Mode: Synchronous processing for simpler integration
- Optimized Patterns: Pattern matching ordered by frequency
- Pre-compiled Regex: All patterns compiled and cached
- Minimal Backtracking: Patterns designed for efficiency
- Memory Efficient: ~3x source code size in memory
When compared to popular syntax highlighters:
| Library | JavaScript | TypeScript | HTML | CSS |
|---|---|---|---|---|
| ts-syntax-highlighter (Fast) | 0.05ms | 0.08ms | 0.04ms | 0.03ms |
| highlight.js | 3.8ms | 1.0ms | 1.2ms | 0.9ms |
| Prism.js | 2.1ms | 0.6ms | 0.8ms | 0.5ms |
Run benchmarks yourself:
bun run benchimport { Tokenizer } from 'ts-syntax-highlighter'
// Create tokenizer for a specific language
const tokenizer = new Tokenizer('javascript' | 'typescript' | 'html' | 'css' | 'json' | 'stx')
// Async tokenization (faster, recommended)
const tokens = await tokenizer.tokenizeAsync(code: string)
// Sync tokenization
const tokens = tokenizer.tokenize(code: string)import { getLanguage, getLanguageByExtension } from 'ts-syntax-highlighter'
// Get language by ID or alias
const lang = getLanguage('js') // Returns JavaScript language
const langTs = getLanguage('tsx') // Returns TypeScript language
// Get language by file extension
const langFromExt = getLanguageByExtension('.jsx') // Returns JavaScript languageinterface Token {
type: string // Token scope (e.g., 'keyword.control.js', 'string.quoted.double.ts')
content: string // The actual text content
line: number // Line number (0-indexed)
startIndex: number // Character position in the line
}
interface LineTokens {
line: number
tokens: Token[]
}# Install dependencies
bun install
# Build the library
bun run build
# Run tests
bun test
# Run benchmarks
bun run bench
# Type checking
bun run typecheck
# Linting
bun run lintPlease see our releases page for more information on what has changed recently.
Please see CONTRIBUTING for details.
For help, discussion about best practices, or any other conversation that would benefit from being searchable:
For casual chit-chat with others using this package:
Join the Stacks Discord Server
“Software that is free, but hopes for a postcard.” We love receiving postcards from around the world showing where Stacks is being used! We showcase them on our website too.
Our address: Stacks.js, 12665 Village Ln #2306, Playa Vista, CA 90094, United States 🌎
We would like to extend our thanks to the following sponsors for funding Stacks development. If you are interested in becoming a sponsor, please reach out to us.
The MIT License (MIT). Please see LICENSE for more information.
Made with 💙
