explaingit

shikijs/shiki

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

TLDR

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

Things people build with this

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.

Tech stack

TypeScript

Getting 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.

In plain English

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.
Open on GitHub → Explain another repo

← shikijs on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.