avgvstvs96/react-shiki

Syntax highlighting hook and component for React, powered by Shiki. Shiki is a really interesting library by the one and only antfu and uses textmate theming instead of the theming that Monaco uses, so in theory this would allow a web tool to use any theme that VS Code uses. This is pretty fascinating.

Summary

react-shiki is a React component and hook for client-side syntax highlighting built on Shiki. It exposes Shiki's TextMate-based highlighter with three bundle entry points and three output formats, letting engineers trade off bundle size against language coverage and rendering control.

What it is useful for

The library fits anywhere a React app renders code snippets: documentation pages, blog posts, in-app code previews, or streaming output from LLM clients. The ShikiHighlighter component gives you a styled block with an optional language label out of the box, while useShikiHighlighter returns highlighted markup you can drop into custom layouts, including integration with react-markdown. Multi-theme support via CSS light-dark() (or manual CSS variables) suits apps that switch between light and dark modes. The react-shiki/core entry is useful for production apps where you want to ship only the languages and themes you actually use.

How engineers can use it

The documented install is npm i react-shiki. The smallest example wraps code in the component with a language and theme:

import ShikiHighlighter from "react-shiki";

<ShikiHighlighter language="jsx" theme="ayu-dark">
  {code.trim()}
</ShikiHighlighter>

The hook equivalent is useShikiHighlighter(code, language, theme). Three entry points are documented: react-shiki (full bundle with all Shiki languages and themes), react-shiki/web (web-focused languages, smaller payload), and react-shiki/core (you build a highlighter with createHighlighterCore plus dynamic theme and language imports). The full and web bundles default to the Oniguruma WASM engine; passing engine: 'javascript' skips the WASM fetch and compile and starts instantly.

Output formats are 'react' (default, no dangerouslySetInnerHTML), 'html' (only for trusted code, since it uses dangerouslySetInnerHTML), and 'tokens' (experimental, hook-only, for engineers who want to render Shiki tokens themselves).

Documented limitations: the JavaScript Raw engine has an upstream bug that mis-highlights some languages including Python, HTML, Perl, and YAML, so verify output before adopting it; the underlying highlighter is a singleton, so pass the same engine at every call site or it locks in whichever ran first; token output does not run Shiki transformers or decorations; the JavaScript engine is strict by default and throws on unconvertible patterns unless forgiving: true is set; and the project's default engine is planned to switch from Oniguruma WASM to the JavaScript engine with forgiving enabled.