Shiki – A beautiful and powerful syntax highlighter

Introduction

Shiki (式, a Japanese word for “Style”) is a syntax highlighter based on the TextMate grammar and theme engine used by VS Code. It provides accurate and fast highlighting for almost any mainstream programming language, without requiring custom regular expressions, CSS, or HTML. As VS Code’s languages and themes evolve, so does Shiki’s highlighting.

All code blocks in this site are highlighted by Shiki.

Features

• All grammars, themes, and WebAssembly are shipped as ESM modules, lazy‑loaded on demand and friendly to bundlers.
• Portable & agnostic – it does not rely on Node.js APIs or the filesystem and works in any modern JavaScript runtime.
• ESM‑only (see the CDN Usage and CJS Usage sections).
• Bundles languages/themes together.
• Light/Dark theme support (Dual Themes).
• Supports hast output (hast support).
• Transformers API (Transformers).
• Decorations API (Decorations).
• Integrations with TypeScript Twoslash (TypeScript Twoslash).
• Compatibility builds (Compatible build).

Playground

Below is a lightweight, client‑side playground where you can experiment with Shiki highlighting. Themes and languages load on demand.

// Playground code will be rendered client‑side.
// (The interactive playground component is omitted in this static view.)

To try it in full, visit the full playground.

Bundle Size

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

As of v1.1.6 (22 February 2024):

Next page: Installation & Usage

Edit this page on GitHub → Suggest changes to this page