Beta

Highlight diffs and code

@pierre/highlights is a super-fast, lightweight syntax highlighter hand-written in WebAssembly Text. Built especially for @pierre/diffs. Includes built-in language lexers, runs across JavaScript runtimes, and supports Shiki-compatible formats. Generates large-file HTML up to 294× faster than Shiki.

Explore the docs

Faster output & lighter footprint

Highlights generates HTML at hundreds of times Shiki’s throughput on large files, with substantially lower peak process memory.

Super-fast HTML generation

Highlights generates HTML at up to 294 times faster than Shiki’s throughput across these fixtures.

TypeScript517 KiB: 294×

HTML474 KiB: 237×

CSS379 KiB: 248×

JSONC292 KiB: 148×

Memory usage

Median peak memory across five runs while highlighting a 517 KiB TypeScript file and generating HTML.

Highlights: 49 MiB
Shiki JS: 155 MiB
Shiki Wasm: 346 MiB

Measured September 25, 2026 on an Apple M4 Pro (14 cores, 48 GiB RAM) using Bun 1.4.0, Shiki 4.4.1, and tree-sitter-highlight 1.1.2. Median throughput after warmup. Memory measured September 16, 2026 as median peak process RSS from five fresh processes per engine. RSS includes the runtime, compiled code, Wasm, and allocator capacity; it is not live heap or bundle size. Results vary by input and environment. Explore the benchmarks and methodology.

Throughput is relative to Shiki’s 1× baseline; higher is better. Each chart uses its own shared zero-based linear scale.

Compared with other highlighters

Highlights processes 5.56 million characters of JavaScript in .09 s. Here’s how it compares with Shu Ding’s gpu-lexer and other syntax highlighters in the same browser run.

Processing three.min.js 10×Elapsed time, shorter is faster

Highlights0.0.3 · Tokens: Elapsed time: .09s
gpu-lexer0.0.2 · Spans: Elapsed time: .40s
Sugar High2.3.1 · HTML: Elapsed time: .87s
Prism.js1.30.0 · HTML: Elapsed time: 1.25s
Highlight.js11.12.0 · HTML: Elapsed time: 1.42s
Starry Night3.11.0 · HAST: Elapsed time: 11.1s
Shiki4.4.3 · Tokens: Elapsed time: 30.2s

Recorded September 15, 2026 · Chromium 152 · Apple M4 Pro. Median of three samples, each with one warm-up in a fresh worker. Bar lengths encode elapsed time; shorter is faster. Every nonzero bar reserves a 6px visibility floor, with elapsed-time percentages mapped proportionally across the remaining width. Highlights and Shiki return themed tokens; gpu-lexer returns classified spans. The other libraries return HTML or a HAST tree. These results measure speed on this JavaScript workload, not highlighting quality. View versions, samples, and run conditions.

Drop-in replacement for Shiki

Highlights support is planned for a forthcoming @pierre/diffs beta and is not available in the current release. Once it ships, set preferredHighlighter: 'highlights' on your component or worker pool to try it. Share feedback while the integration is experimental.

import { useId, useState, type ReactNode } from "react";

type Status = "open" | "merged" | "closed";
type PullRequest = {
  id: number;
  title: string;
  author: { name: string; avatar?: string };
  status: Status;
  additions: number;
  deletions: number;
};

const statusLabels = {
  open: "Ready for review",
  merged: "Merged",
  closed: "Closed",
} satisfies Record<Status, string>;

/** A searchable review queue with a custom action for each pull request. */
export function ReviewQueue({ items, renderAction }: {
  items: readonly PullRequest[];
  renderAction: (item: PullRequest) => ReactNode;
}) {
  const searchId = useId();
  const [query, setQuery] = useState("");
  const matches = items.filter(({ title, author }) =>
    `${title} ${author.name}`.toLowerCase().includes(query.toLowerCase())
  );

return (
    <section aria-label="Pull requests">
      <label htmlFor={searchId}>Find a review</label>
      <input id={searchId} value={query}
        onChange={(event) => setQuery(event.currentTarget.value)} />
      <ul>
        {matches.map((pr) => (
          <li key={pr.id} className={`review review--${pr.status}`}>
            <a href={`/pull/${pr.id}`}>{pr.title}</a>
            <span>{statusLabels[pr.status]} · {pr.author.name}</span>
            <code>+{pr.additions} / −{pr.deletions}</code>
            {renderAction(pr)}
          </li>
        ))}
      </ul>
      {matches.length === 0 && <p>No reviews match “{query}”.</p>}
    </section>
  );
}

import { useId, useState, type ReactNode } from "react";
type Status = "open" | "merged" | "closed";
type PullRequest = {
  id: number;
  title: string;
  author: { name: string; avatar?: string };
  status: Status;
  additions: number;
  deletions: number;
const statusLabels = {
  open: "Ready for review",
  merged: "Merged",
  closed: "Closed",
} satisfies Record<Status, string>;
/** A searchable review queue with a custom action for each pull request. */
export function ReviewQueue({ items, renderAction }: {
  items: readonly PullRequest[];
  renderAction: (item: PullRequest) => ReactNode;
  const searchId = useId();
  const [query, setQuery] = useState("");
  const matches = items.filter(({ title, author }) =>
    `${title} ${author.name}`.toLowerCase().includes(query.toLowerCase())
    <section aria-label="Pull requests">
      <label htmlFor={searchId}>Find a review</label>
      <input id={searchId} value={query}
        onChange={(event) => setQuery(event.currentTarget.value)} />
        {matches.map((pr) => (
          <li key={pr.id} className={`review review--${pr.status}`}>
            <a href={`/pull/${pr.id}`}>{pr.title}</a>
            <span>{statusLabels[pr.status]} · {pr.author.name}</span>
            <code>+{pr.additions} / −{pr.deletions}</code>
            {renderAction(pr)}
          </li>
        ))}
      </ul>
      {matches.length === 0 && <p>No reviews match “{query}”.</p>}
    </section>

import { useId, useState, type ReactNode } from "react";

type Status = "open" | "merged" | "closed";
type PullRequest = {
  id: number;
  title: string;
  author: { name: string; avatar?: string };
  status: Status;
  additions: number;
  deletions: number;
};

const statusLabels = {
  open: "Ready for review",
  merged: "Merged",
  closed: "Closed",
} satisfies Record<Status, string>;

/** A searchable review queue with a custom action for each pull request. */
export function ReviewQueue({ items, renderAction }: {
  items: readonly PullRequest[];
  renderAction: (item: PullRequest) => ReactNode;
}) {
  const searchId = useId();
  const [query, setQuery] = useState("");
  const matches = items.filter(({ title, author }) =>
    `${title} ${author.name}`.toLowerCase().includes(query.toLowerCase())
  );

  return (
    <section aria-label="Pull requests">
      <label htmlFor={searchId}>Find a review</label>
      <input id={searchId} value={query}
        onChange={(event) => setQuery(event.currentTarget.value)} />
      <ul>
        {matches.map((pr) => (
          <li key={pr.id} className={`review review--${pr.status}`}>
            <a href={`/pull/${pr.id}`}>{pr.title}</a>
            <span>{statusLabels[pr.status]} · {pr.author.name}</span>
            <code>+{pr.additions} / −{pr.deletions}</code>
            {renderAction(pr)}
          </li>
        ))}
      </ul>
      {matches.length === 0 && <p>No reviews match “{query}”.</p>}
    </section>
  );
}

import { useId, useState, type ReactNode } from "react";

type Status = "open" | "merged" | "closed";
type PullRequest = {
  id: number;
  title: string;
  author: { name: string; avatar?: string };
  status: Status;
  additions: number;
  deletions: number;
};

const statusLabels = {
  open: "Ready for review",
  merged: "Merged",
  closed: "Closed",
} satisfies Record<Status, string>;

/** A searchable review queue with a custom action for each pull request. */
export function ReviewQueue({ items, renderAction }: {
  items: readonly PullRequest[];
  renderAction: (item: PullRequest) => ReactNode;
}) {
  const searchId = useId();
  const [query, setQuery] = useState("");
  const matches = items.filter(({ title, author }) =>
    `${title} ${author.name}`.toLowerCase().includes(query.toLowerCase())
  );

  return (
    <section aria-label="Pull requests">
      <label htmlFor={searchId}>Find a review</label>
      <input id={searchId} value={query}
        onChange={(event) => setQuery(event.currentTarget.value)} />
      <ul>
        {matches.map((pr) => (
          <li key={pr.id} className={`review review--${pr.status}`}>
            <a href={`/pull/${pr.id}`}>{pr.title}</a>
            <span>{statusLabels[pr.status]} · {pr.author.name}</span>
            <code>+{pr.additions} / −{pr.deletions}</code>
            {renderAction(pr)}
          </li>
        ))}
      </ul>
      {matches.length === 0 && <p>No reviews match “{query}”.</p>}
    </section>
  );
}

Supports over 70 languages

Highlights ships its language lexers in one small WebAssembly module. No grammar downloads or language registration. Pick a language and edit the example below to try it yourself.

 * 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.

Install Highlights

Get started by installing the package manually, or using our agent skills and prompts.

Documentation

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

HighlightHighlight diffs and code