Introduction

Shiki (式, a Japanese word for "Style") is a beautiful and powerful syntax highlighter based on TextMate grammar and themes, the same engine as VS Code's syntax highlighting. Provides very accurate and fast syntax highlighting for almost any mainstream programming language.

No custom RegExp to maintain, no custom CSS to maintain, no custom HTML to maintain. And as your favorite languages and themes in VS Code evolve - your syntax highlighting will evolve too.

Oh by the way, all the code blocks in this site are highlighted by Shiki, as you'd expect :)

Features

• All grammars/themes/wasm served as pure-ESM, no CDN and assets needed.
• Portable. Does not rely on Node.js APIs or the filesystem, works in any modern JavaScript runtime.
• ESM-only (CDN Usage, CJS Usage).
• Bundles languages/themes composedly.
• Light/Dark themes support.
• AST-based transformers addons.
• hast support.
• TypeScript Twoslash.
• Compatible build.

Playground

Here is a little playground for you to try out how Shiki highlights your code. Unlike other code blocks that ran on the build time, this playground is rendered on the client side in the browser. Themes and languages are loaded on demand.

TypeScript

────────── Vitesse Dark

Playground

Install Shiki to use it in your project.

Who is using?

Projects that depend on Shiki (sorted alphabetically):

• Astro
• Expressive Code
• JSX email
• Lobe UI
• Nuxt Content
• Slidev
• VitePress
• Vocs

Bundle Size

You can inspect the bundle size in detail on pkg-size.dev/shiki.

As of v0.9.11, measured at 21th, December 2023:

Bundle	Size (minified)	Size (gzip)	Notes
shiki	6.4 MB	1.2 MB	All themes and languages as async chunks
shiki/bundle/full	6.4 MB	1.2 MB	Same as shiki
shiki/bundle/web	3.8 MB	695 KB	All themes and common web languages as async chunks
shiki/core	100 KB	31 KB	Core engine without any themes or languages, compose on your own
shiki/wasm	623 KB	231 KB	WASM binary inlined as base64 string