Shiki
VS Code-quality syntax highlighter using TextMate grammars and VS Code themes. Produces HTML with inline styles rather than CSS classes — no external stylesheet needed. Powers syntax highlighting in the VitePress, Nuxt, Astro, and many modern documentation sites. Shiki v1 (Shikiji merge) is a complete rewrite with universal (browser/Node/Deno/Bun) support and a streaming renderer.
Score Breakdown
⚙ Agent Friendliness
🔒 Security
Local computation. MIT licensed. HTML output escapes code content to prevent XSS from highlighted code.
⚡ Reliability
Best When
You need VS Code-quality syntax highlighting with TextMate grammar accuracy for documentation, blogs, or static sites — and bundle size isn't a primary constraint.
Avoid When
You need lightweight browser-side highlighting or an interactive code editor. For simple projects, highlight.js is smaller and simpler.
Use Cases
- • Generate VS Code-quality syntax-highlighted HTML for static site generators, documentation sites, and blogs
- • Add accurate language-specific code highlighting to agent-generated content for developer-facing APIs
- • Process code blocks in Markdown content pipelines with TextMate grammar accuracy matching VS Code
- • Embed beautifully highlighted code examples in email templates or PDFs (inline styles, no CSS dependency)
- • Power real-time code highlighting in documentation tools where VS Code theme compatibility is required
Not For
- • Interactive code editors — Shiki produces static HTML; use Monaco Editor for editable code with VS Code features
- • Client-side runtime highlighting — Shiki loads full grammar files (~10MB+); for browser, use highlight.js or prism.js which are smaller
- • Simple projects where highlight.js's lighter weight is preferable — Shiki's VS Code quality comes with larger bundle size
Interface
Authentication
Local library — no authentication required. MIT licensed.
Pricing
MIT licensed. Zero cost.
Agent Metadata
Known Gotchas
- ⚠ Shiki is async — codeToHtml() returns a Promise; await it: const html = await codeToHtml(code, { lang: 'javascript', theme: 'vitesse-dark' })
- ⚠ createHighlighter() is the recommended API in v1 — create once at startup, reuse; each call loads grammars into memory
- ⚠ Grammars and themes must be explicitly loaded — bundler tree-shaking won't include unused grammars: createHighlighter({ themes: ['vitesse-dark'], langs: ['javascript', 'python'] })
- ⚠ Inline styles vs CSS classes — Shiki outputs inline styles by default; use addClassToHaveInlineStyles option or htmlRendererOptions for class-based output
- ⚠ v1 breaking changes from v0.x — API completely redesigned; migration guide available at shiki.style/guide/migrate-v0
- ⚠ Bundle size concern for browser use — loading many languages and themes significantly increases bundle; use CDN or lazy-load specific grammars for browser applications
Alternatives
Full Evaluation Report
Detailed scoring breakdown, competitive positioning, security analysis, and improvement recommendations for Shiki.
Scores are editorial opinions as of 2026-03-06.