{"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.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-shiki"],"cli":null},"imports":["import ShikiHighlighter from 'react-shiki';","import { useShikiHighlighter } from 'react-shiki';","import ShikiHighlighter from 'react-shiki/web';","import type { ShikiHighlighterProps } from 'react-shiki';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}