---
title: "Shiki"
description: "A syntax highlighter using TextMate grammars and editor-style themes."
pagination: false
---

{/* Generated from content/. Edit the catalog, not this page. */}

<PurposeNote title="Good for">Rendering code samples with coloring similar to a code editor.</PurposeNote>

## What it does

A syntax highlighter using TextMate grammars and editor-style themes.

## When it fits

Rendering code samples with coloring similar to a code editor.

## Other options in this category

<div data-pagefind-ignore>

- [Code Hike](/code-highlighting/code-hike) — Building interactive code walkthroughs and technical storytelling pages.
- [Expressive Code](/code-highlighting/expressive-code) — Publishing code examples with highlighting, annotations, and presentation features.
- [Lowlight](/code-highlighting/lowlight) — Rendering highlighted code through a custom virtual-DOM integration.
- [Shiki Magic Move](/code-highlighting/shiki-magic-move) — Showing how code evolves during a tutorial or presentation.
- [Speed Highlight](/code-highlighting/speed-highlight) — Adding highlighted code samples to webpages and documentation.

</div>

## Source

[Project source for Shiki ↗](https://www.npmjs.com/package/shiki)

Editorial overview reviewed on October 24, 2026. Follow the source for current setup, compatibility, and licensing.

[Explain code visually →](/tasks/explain-code-visually)

[All code highlighting options →](/code-highlighting)