whatisgithub

What is shiki?

shikijs/shiki — explained in plain English

Analysis updated 2026-06-24

★ 13,318TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

In one sentence

A TypeScript library that adds accurate, editor-quality syntax highlighting to code samples on websites and in documentation, using the same grammar files as Visual Studio Code to produce colors that match what developers see in their editor.

Mindmap

mindmap
  root((Shiki))
    How It Works
      TextMate grammars
      VS Code themes
      Server-side render
    Output
      HTML color spans
      Editor-accurate
    Use Cases
      Docs sites
      Blog code blocks
      Web apps
    Versioning
      v4 main branch
      v0 v1 v2 v3 branches
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Add VS Code-accurate syntax-highlighted code blocks to a documentation site or blog so code examples look polished and readable.

USE CASE 2

Pre-render highlighted code at build time for a static site, so no client-side highlighting JavaScript is shipped to users.

USE CASE 3

Embed colored code samples in a web app or email newsletter with language-accurate highlighting across many programming languages.

What is it built with?

TypeScript

How does it compare?

shikijs/shikipeers/peerjsvendicated/vencord
Stars13,31813,32713,306
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasymoderateeasy
Complexity2/52/52/5
Audiencedeveloperdevelopergeneral

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 30min
Licensed under MIT, use freely in any project, including commercial ones, as long as you keep the copyright notice.

So what is it?

Shiki is a TypeScript library for syntax highlighting, used to color code samples in documentation sites, blog posts, and web applications. Syntax highlighting assigns different colors to different parts of code based on their role in the language: keywords, strings, comments, and variables each get a distinct color, making code easier to scan and read. The library uses TextMate grammars as its coloring engine. TextMate grammars are the same definition files used by editors like Visual Studio Code, so the output Shiki produces closely matches what a developer sees in a typical code editor. The README for this repository is brief and does not describe which languages are supported, how to install the library, or what configuration options exist. The main branch is currently version 4.x. Earlier versions (v0, v1, v2, and v3) are maintained on separate branches for projects that depend on them. Full documentation lives at an external site rather than in this repository. The project is licensed under MIT. Because the README is sparse, this explanation is limited to what it states. Guides, integration examples, and the full list of supported themes are available in the project documentation at shiki.style.

Copy-paste prompts

Prompt 1
Using Shiki v4, highlight a TypeScript code snippet with the github-dark theme and return the result as an HTML string I can embed in a blog post.
Prompt 2
How do I integrate Shiki into a Next.js app to syntax-highlight MDX code blocks at build time with zero client-side JavaScript?
Prompt 3
Show me how to use Shiki's transformers API to add line numbers and highlight specific lines in a code block on a documentation site.

Frequently asked questions

What is shiki?

A TypeScript library that adds accurate, editor-quality syntax highlighting to code samples on websites and in documentation, using the same grammar files as Visual Studio Code to produce colors that match what developers see in their editor.

What language is shiki written in?

Mainly TypeScript. The stack also includes TypeScript.

What license does shiki use?

Licensed under MIT, use freely in any project, including commercial ones, as long as you keep the copyright notice.

How hard is shiki to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is shiki for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.

What are similar repos?