{"id":15214,"library":"react-shiki","title":"React Shiki Syntax Highlighter","description":"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.","status":"active","version":"0.9.3","language":"javascript","source_language":"en","source_url":"https://github.com/AVGVSTVS96/react-shiki","tags":["javascript","react","shiki","code","syntax","highlighter","syntax-highlighter","react-syntax-highlighter","typescript"],"install":[{"cmd":"npm install react-shiki","lang":"bash","label":"npm"},{"cmd":"yarn add react-shiki","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-shiki","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"React component library peer dependency","package":"react","optional":false},{"reason":"React DOM peer dependency","package":"react-dom","optional":false},{"reason":"TypeScript type definitions for React","package":"@types/react","optional":true},{"reason":"TypeScript type definitions for React DOM","package":"@types/react-dom","optional":true}],"imports":[{"note":"Primary component for direct rendering. Consider specific bundle imports like 'react-shiki/web' or 'react-shiki/core' for size optimization.","wrong":"const ShikiHighlighter = require('react-shiki');","symbol":"ShikiHighlighter","correct":"import ShikiHighlighter from 'react-shiki';"},{"note":"A named hook for programmatic highlighting. Ensure named import syntax.","wrong":"import useShikiHighlighter from 'react-shiki';","symbol":"useShikiHighlighter","correct":"import { useShikiHighlighter } from 'react-shiki';"},{"note":"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.","wrong":"import ShikiHighlighter from 'react-shiki';","symbol":"Web Bundle Component","correct":"import ShikiHighlighter from 'react-shiki/web';"},{"note":"Import types for component props to leverage TypeScript's type checking capabilities.","symbol":"ShikiHighlighterProps","correct":"import type { ShikiHighlighterProps } from 'react-shiki';"}],"quickstart":{"code":"import ShikiHighlighter from \"react-shiki\";\nimport { useState } from 'react';\n\nfunction CodeExample() {\n  const [code, setCode] = useState(`function greet(name: string): string {\n  return \\`Hello, ${name}!\\`;\n}\n\nconst message = greet(\"World\");\nconsole.log(message);\n`);\n\n  return (\n    <div>\n      <label htmlFor=\"code-input\">Edit code:</label>\n      <textarea\n        id=\"code-input\"\n        value={code}\n        onChange={(e) => setCode(e.target.value)}\n        rows={10}\n        cols={50}\n        style={{ width: '100%', minHeight: '150px' }}\n      />\n      <h2>Highlighted Code:</h2>\n      <ShikiHighlighter\n        language=\"typescript\"\n        theme=\"ayu-dark\"\n        showLanguage={true}\n        wrap={true}\n      >\n        {code.trim()}\n      </ShikiHighlighter>\n    </div>\n  );\n}","lang":"typescript","description":"This example demonstrates how to use the `ShikiHighlighter` component to display and dynamically update syntax-highlighted TypeScript code with a specified theme."},"warnings":[{"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.","message":"In 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.","severity":"breaking","affected_versions":">=0.9.3"},{"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.","message":"The 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.","severity":"gotcha","affected_versions":">=0.1.0"},{"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.","message":"Shiki 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.","severity":"gotcha","affected_versions":">=0.1.0"},{"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'`.","message":"The `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.","severity":"gotcha","affected_versions":">=0.8.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"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.","cause":"The specified language was not loaded by Shiki or has an incorrect identifier.","error":"Error: [shiki] Language 'mylang' does not exist. Did you forget to load it?"},{"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.","cause":"TypeScript or your bundler cannot locate the specific bundle entry point or its type definitions.","error":"TS2307: Cannot find module 'react-shiki/web' or its corresponding type declarations."},{"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.","cause":"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.","error":"Code block is rendered without highlighting/styling, appears as plain text."}],"ecosystem":"npm"}