What is Shiki?

Updated

Shiki is a syntax highlighter that uses TextMate grammars and the same engine as VS Code, so highlighted code looks accurate and matches what you see in the editor. It is a good fit when you want high-quality code display on a website or in documentation and care about correctness across many languages.

How Shiki works

Shiki highlights code by applying TextMate grammars, the same grammar format used by VS Code. Because it relies on that grammar system and the VS Code engine, its output improves as VS Code's language support improves.

The site describes Shiki as "Accurate & Beautiful" and "TextMate grammar powered, same engine as your VS Code."

Key characteristics

Accurate and beautiful

Highlighting is driven by TextMate grammars, which are designed to tokenize code according to language rules rather than simple pattern matching. This tends to produce more faithful results, especially for complex languages.

Zero runtime

Shiki emphasizes a zero-runtime approach. In practice, this means highlighting can be handled without shipping a heavy highlighting engine to the browser at runtime, which matters for page performance and for static or pre-rendered content.

Customizable

Shiki is described as customizable, so you can adapt themes and output to match your site or documentation style.

ESM and universal

Shiki supports ESM and is described as universal, making it usable across modern JavaScript environments and build setups.

When to use Shiki

Shiki is a strong choice when:

  • You need code samples to look the same as they do in VS Code.
  • You want accurate highlighting across many languages via TextMate grammars.
  • You are building documentation, blogs, or sites where code presentation quality matters.
  • You want to avoid a heavy client-side highlighting runtime.

It is less of a fit if you only need very lightweight, approximate highlighting and do not care about editor-accurate tokenization.

Summary

Shiki is a TextMate grammar–powered syntax highlighter built on the VS Code engine. It focuses on accurate, beautiful output, supports a zero-runtime approach, and is customizable and ESM-friendly, making it well suited for websites and documentation that need reliable code highlighting.