react-shiki

library0.9.3jsnpmunverified

react-shiki is a performant client-side syntax highlighting component and hook for React, leveraging the Shiki library. As of version 0.9.3, it offers flexible output options, including React elements to avoid `dangerouslySetInnerHTML` or raw HTML strings for improved performance. The package provides multiple bundle choices (Full, Web, Core) to optimize bundle size depending on the languages and themes required. It fully supports custom TextMate themes, languages, and Shiki transformers. Key features include dynamic language and theme imports for optimal performance, optional line numbers, and performance optimizations like throttling for real-time highlighting. The project maintains a regular patch release cadence, with minor versions introducing features such as output format selection and regex engine customization, ensuring active development and feature expansion.

web-framework

npm install react-shiki

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-SHIKI

react-shiki

web-frameworkjavascriptv0.9.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

ShikiHighlighter

✓ import ShikiHighlighter from 'react-shiki';

✗ const ShikiHighlighter = require('react-shiki');

Primary component for direct rendering. Consider specific bundle imports like 'react-shiki/web' or 'react-shiki/core' for size optimization.

useShikiHighlighter

✓ import { useShikiHighlighter } from 'react-shiki';

✗ import useShikiHighlighter from 'react-shiki';

A named hook for programmatic highlighting. Ensure named import syntax.

Web Bundle Component

✓ import ShikiHighlighter from 'react-shiki/web';

✗ import ShikiHighlighter from 'react-shiki';

Use this specific import for the 'web' optimized bundle, which excludes Node.js-specific modules and reduces overall size compared to the default full bundle.

ShikiHighlighterProps

✓ import type { ShikiHighlighterProps } from 'react-shiki';

Import types for component props to leverage TypeScript's type checking capabilities.

This example demonstrates how to use the `ShikiHighlighter` component to display and dynamically update syntax-highlighted TypeScript code with a specified theme.

import ShikiHighlighter from "react-shiki"; import { useState } from 'react'; function CodeExample() { const [code, setCode] = useState(`function greet(name: string): string { return \`Hello, ${name}!\`; } const message = greet("World"); console.log(message); `); return ( <div> <label htmlFor="code-input">Edit code:</label> <textarea id="code-input" value={code} onChange={(e) => setCode(e.target.value)} rows={10} cols={50} style={{ width: '100%', minHeight: '150px' }} /> <h2>Highlighted Code:</h2> <ShikiHighlighter language="typescript" theme="ayu-dark" showLanguage={true} wrap={true} > {code.trim()} </ShikiHighlighter> </div> ); }

Debug

Known issues

breakingIn version 0.9.3, CSS classnames and line-number CSS variables were renamed to use an `rs-` prefix to improve CSS specificity. While legacy aliases are temporarily kept, they will be removed in a future major release, potentially breaking custom styling.

fix

Update your custom CSS to use the new `rs-` prefixed classnames and CSS variables (e.g., `rs-line`, `rs-line-number`, `--rs-line-number-color`). Consider utilizing CSS `@layer base` for better specificity management.

affects: >=0.9.3

gotchaThe default `react-shiki` import uses the 'Full Bundle' which is approximately 1.2MB gzipped, including all Shiki languages and themes. This can lead to a large client-side bundle size and slower initial page loads, especially if only a few languages/themes are needed.

fix

For smaller bundles, import from `react-shiki/web` (~695KB gzipped) or `react-shiki/core` (minimal bundle) and explicitly load only the required languages and themes using the `loadLanguage` and `loadTheme` configuration options.

affects: >=0.1.0

gotchaShiki dynamically imports languages and themes on demand. While this optimizes initial bundle size by fetching assets as needed, it requires network access to load these resources during runtime. In offline environments or strict Content Security Policy (CSP) setups, this can prevent highlighting.

fix

For offline use or controlled environments, preload languages and themes during application initialization using Shiki's API or configure your bundler to include them. Ensure your CSP allows network requests to the Shiki assets if not self-hosted.

affects: >=0.1.0

gotchaThe `outputFormat` prop (introduced in v0.8.0) defaults to `jsx`, which renders React elements. While safer against XSS, rendering raw HTML strings via `outputFormat="html"` can offer significantly better performance for very large code blocks, but requires `dangerouslySetInnerHTML` internally.

fix

If performance is critical for large code blocks and you trust the input, set the `outputFormat` prop on `ShikiHighlighter` or the `outputFormat` option in `useShikiHighlighter` to `'html'`.

affects: >=0.8.0

Errors

Common errors & fixes

Error: [shiki] Language 'mylang' does not exist. Did you forget to load it?

The specified language was not loaded by Shiki or has an incorrect identifier.

fix

Ensure the `language` prop matches a supported Shiki language ID. If it's a custom language, load it using `loadLanguage` or provide it via the `languages` prop.

TS2307: Cannot find module 'react-shiki/web' or its corresponding type declarations.

TypeScript or your bundler cannot locate the specific bundle entry point or its type definitions.

fix

Verify the import path is correct (`react-shiki/web` or `react-shiki/core`). Ensure your `tsconfig.json` or bundler configuration is set up to resolve module paths correctly for sub-path exports. Restarting your IDE might also help.

Code block is rendered without highlighting/styling, appears as plain text.

The CSS styles provided by `react-shiki` or your custom styles are not being applied, or the component isn't receiving the code/language props correctly.

fix

Ensure you have imported the minimal default styles (if desired) and that your component props (`code`, `language`, `theme`) are correctly passed. Check browser developer tools for CSS conflicts or missing styles. Review the `warnings` section for potential CSS class name changes.

Upgrade

Version history

0.9.3latest on npm

Audit

Dependencies

reactrequiredReact component library peer dependency

react-domrequiredReact DOM peer dependency

@types/reactoptionalTypeScript type definitions for React

@types/react-domoptionalTypeScript type definitions for React DOM

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/AVGVSTVS96/react-shiki ↗

packagehttps://www.npmjs.com/package/react-shiki ↗

homepagehttps://react-shiki.vercel.app/ ↗