Shiki

Shiki is a syntax highlighter that renders source code using the exact same TextMate grammars and themes that power VS Code, so highlighted output matches what developers already see in their editor. It ships as a modular pnpm monorepo — a core tokenizer package, pluggable WASM or pure-JavaScript regex engines, and independently versioned language/theme bundles — so it can run anywhere from Node.js and browsers to edge runtimes like Cloudflare Workers.

Rather than a single one-size-fits-all API, Shiki offers a layered set of entry points: async shorthand functions for zero-config use, a reusable highlighter singleton for synchronous rendering, and a fine-grained core bundle for teams that need to control exactly which languages and themes ship to the client. Official integrations for rehype, markdown-it, VitePress, Monaco, and TypeScript Twoslash make it a common default for documentation sites and static blogs.

What You Get

• Editor-accurate highlighting via the same TextMate grammars and themes VS Code ships with
• Two swappable regex engines — WASM Oniguruma for full grammar fidelity, or a pure-JS engine for WASM-restricted runtimes like Cloudflare Workers
• Shorthand async functions (codeToHtml, codeToTokens, codeToHast) plus a synchronous, reusable highlighter instance for hot paths
• Official integrations for rehype, markdown-it, VitePress, Monaco Editor, and TypeScript Twoslash
• Fine-grained bundle control via @shikijs/core so only the languages and themes you use ship to the client

Common Use Cases

• Syntax-highlighting code blocks in static site generators and MDX/Markdown-based documentation sites
• Rendering highlighted code in blog and CMS platforms via the rehype/markdown-it plugins
• Powering in-browser code editors and playgrounds through the Monaco Editor integration
• Generating type-checked, hover-annotated TypeScript code samples with the Twoslash integration

Under The Hood

Architecture Shiki is organized as a pnpm workspace of roughly twenty packages under packages/, with @shikijs/types defining shared interfaces, @shikijs/core implementing the primitive tokenizer/highlighter logic (packages/core/src/constructors/highlighter.ts, packages/core/src/highlight/code-to-*.ts), and @shikijs/engine-oniguruma / @shikijs/engine-javascript providing pluggable regex engines. The top-level shiki package (packages/shiki/src/index.ts, bundle-full.ts) composes these primitives with pre-bundled language grammars (@shikijs/langs) and themes (@shikijs/themes) into convenience shorthand functions (codeToHtml, codeToTokens, codeToHast) and a stateful createHighlighter API, while createHighlighterCore in @shikijs/core lets consumers opt into a zero-bundle, fully manual language/theme-loading path. Integration packages (rehype, markdown-it, vitepress-twoslash, monaco, twoslash, transformers) sit on top as separate workspace packages depending on the shared primitive rather than shiki itself, keeping the dependency graph directional.

Tech Stack The codebase is 100% ESM, written in strict TypeScript (over 90% of the repo by bytes) and built per-package with tsdown; the monorepo uses pnpm workspaces with pnpm’s catalog feature to pin shared dependency versions across ~20 packages, taze for dependency bumps, bumpp for coordinated releases, and vitest (with @vitest/coverage-v8) for testing, plus a bench/ directory for performance benchmarking. Highlighting is powered by vscode-oniguruma (a WASM build of the Oniguruma regex engine VS Code’s TextMate grammars use) or, alternatively, a pure-JavaScript regex engine for runtimes that cannot instantiate WASM from raw bytes, such as Cloudflare Workers; language and theme data is sourced from the tm-grammars and tm-themes packages and shipped as async-loaded chunks.

Code Quality The monorepo contains 73 test files exercised via vitest, covering the highlighter core, individual language grammars, theme loading, decorations, ANSI tokenization, and framework integrations (astro.test.ts, shorthands-markdown.test.ts, and others); typechecking runs through vue-tsc —noEmit across the workspace and linting is enforced with @antfu/eslint-config plus eslint-plugin-format, with simple-git-hooks wiring checks into the commit flow. Public APIs are precisely typed (HighlighterCore, HighlighterCoreOptions generics keyed on sync/async mode) and internal modules stay small and single-purpose — code-to-html.ts, for example, is 36 lines that compose codeToHast and hastToHtml — which keeps individual files easy to reason about despite the large aggregate surface area.

API Design The public API is layered for progressive disclosure: newcomers reach for the async codeToHtml(code, {lang, theme}) shorthand and get a working highlighter with zero setup, performance-sensitive consumers call createHighlighter({themes, langs}) once and reuse a long-lived singleton for synchronous highlighting, and advanced consumers drop to createHighlighterCore/createHighlighterCoreSync to hand-pick exactly which languages, themes, and regex engine ship in their bundle. Naming stays consistent across the codeTo* family (codeToHtml, codeToTokens, codeToHast, codeToTokensBase), the package.json export map documents fine-grained entry points (shiki/core, shiki/wasm, shiki/engine/javascript, shiki/bundle/web) directly, and the docs site pairs every guide example with runnable TwoSlash-annotated TypeScript so documentation and type signatures don’t drift apart.