Experimental

Highlight code at native speed

@pierre/highlights is a fast code highlighter written by hand in WebAssembly Text. It ships with built-in language lexers, works across runtimes, and speaks familiar Shiki-compatible formats. Made by The Pierre Computer Company.

Documentation View on GitHub

66.0 KiB gzipped Wasm · 67 built-in languages · 132–559× Shiki HTML throughput (Benchmark).

 * An interface for a point in 2D space.
interface Point {
  x: number;
  y: number;
 * Calculates the distance between two points.
 * @param {Point} a - The first point.
 * @param {Point} b - The second point.
 * @returns The distance between a and b.
function distance(a: Point, b: Point): number {
  const dx = a.x - b.x;
  const dy = a.y - b.y;
  return Math.hypot(dx, dy);
console.log(distance({ x: 0, y: 0 }, { x: 3, y: 4 }));

/**
 * An interface for a point in 2D space.
 */
interface Point {
  x: number;
  y: number;
}

/**
 * Calculates the distance between two points.
 * @param {Point} a - The first point.
 * @param {Point} b - The second point.
 * @returns The distance between a and b.
 */
function distance(a: Point, b: Point): number {
  const dx = a.x - b.x;
  const dy = a.y - b.y;
  return Math.hypot(dx, dy);
}

console.log(distance({ x: 0, y: 0 }, { x: 3, y: 4 }));

/**
 * An interface for a point in 2D space.
 */
interface Point {
  x: number;
  y: number;
}

/**
 * Calculates the distance between two points.
 * @param {Point} a - The first point.
 * @param {Point} b - The second point.
 * @returns The distance between a and b.
 */
function distance(a: Point, b: Point): number {
  const dx = a.x - b.x;
  const dy = a.y - b.y;
  return Math.hypot(dx, dy);
}

console.log(distance({ x: 0, y: 0 }, { x: 3, y: 4 }));

Fast, familiar, and editor-ready.

Native WebAssembly performance, Shiki-compatible output, and incremental tokenization built for editors.

Native performance

One-pass lexers: Hand-written Wasm lexers emit HTML or token records directly, with no AST or grammar runtime.
Linear memory: Source bytes, lexer state, and output live in WebAssembly linear memory, keeping the lexer's working data off the JavaScript heap.
Zero-copy output: codeToHtml() returns a view into WebAssembly memory, ready for a response, file, or decoder.
SIMD scans: Hot paths read 16 bytes per step, and equal styles share spans across whitespace.

Shiki compatibility

Familiar APIs: Use codeToHtml() and codeToTokens() in familiar highlighting workflows.
Themes included: Includes all of Shiki's built-in community themes, plus Pierre's light and dark themes.
Dual themes: Pass themes to render light and dark in one pass, with Shiki's CSS custom properties or light-dark() colors.
Streaming API: StreamTokenizer emits completed lines of themed tokens as code arrives, preserving lexer state across chunks.

Editor friendly

Incremental edits: LiveTokenizer re-tokenizes only lines whose text or lexer state changed.
Visible-range rendering: Bound synchronous work to the viewport while off-screen lines converge in the background.
Precise updates: Every edit reports exactly which lines changed, leaving untouched rows alone.

With love from The Pierre Computer Company

Collectively, our team brings over 150 years of expertise designing, building, and scaling the world's largest distributed systems at Cloudflare, Coinbase, Discord, GitHub, Reddit, Stripe, X, and others.

Join Discord View on GitHub