Shiki — Syntax Highlighter Powered by TextMate Grammars

Introduction

Shiki uses TextMate grammars and VS Code themes to produce syntax highlighting that is visually identical to what you see in VS Code. Unlike regex-based highlighters, Shiki parses code with the same tokenizer engine used by editors, providing accurate highlighting for every language VS Code supports — over 200 languages out of the box.

What Shiki Does

• Tokenizes source code using TextMate/Oniguruma grammar files
• Applies VS Code theme colors to produce inline-styled HTML output
• Supports 200+ languages and all VS Code themes without additional configuration
• Provides transformers for line highlighting, diffs, focus, and annotations
• Works at build time (SSG/SSR) with zero client-side JavaScript

Architecture Overview

Shiki loads TextMate grammar files (JSON) and theme definitions, then uses a WASM-compiled Oniguruma regex engine to tokenize input code. Each token receives scope metadata that maps to theme color rules. The renderer walks the token stream and emits HTML spans with inline styles or CSS classes. Since all processing happens at build time or server-side, the browser receives pre-colored HTML with no runtime JS cost.

Self-Hosting & Configuration

• Install via npm and import codeToHtml or createHighlighter for reuse
• Preload specific languages and themes to reduce initialization time
• Use createHighlighter() to create a reusable instance for batch processing
• Integrate with Astro, Next.js, Nuxt, or VitePress via official plugins
• Add custom themes by providing VS Code theme JSON files

Key Features

• Pixel-perfect VS Code highlighting accuracy using the same grammar engine
• Zero client-side JavaScript — outputs pre-rendered HTML
• Transformers system for line numbers, diffs, highlights, and custom annotations
• Dual-theme support (light/dark) with CSS variables mode
• Fine-grained loading — only bundle grammars and themes you actually use

Comparison with Similar Tools

• Prism.js — Prism uses simplified regex rules; Shiki uses full TextMate grammars for deeper accuracy
• Highlight.js — Highlight.js auto-detects languages at runtime; Shiki runs at build time for zero JS bundles
• Torchlight — Torchlight is a hosted API service; Shiki runs locally with no network dependency
• Starry Night — Starry Night also uses TextMate grammars but targets unified/remark; Shiki is framework-agnostic
• Sugar High — Sugar High is ultra-lightweight (1KB) but only supports a limited subset of languages

FAQ

Q: Does Shiki add JavaScript to my page? A: No. Shiki renders at build time and outputs static HTML with inline styles. The browser receives pre-colored markup.

Q: How many languages does Shiki support? A: Over 200 languages using the same TextMate grammar collection that powers VS Code syntax highlighting.

Q: Can I use custom VS Code themes? A: Yes. Any VS Code theme JSON file can be loaded directly into Shiki as a custom theme.

Q: How does Shiki handle performance with many code blocks? A: Create a highlighter instance once with createHighlighter() and reuse it across all blocks to amortize grammar loading cost.

Sources

• https://github.com/shikijs/shiki
• https://shiki.style