{"library":"prism-react-renderer","title":"Prism React Renderer","description":"Prism React Renderer is a lightweight, render-props-driven React component that facilitates syntax highlighting of code using a bundled and modified version of PrismJS. It is currently stable at version 2.4.1 and is actively maintained by FormidableLabs, with regular updates to support new React features and fix bugs. The library distinguishes itself by not polluting the global namespace with PrismJS, supporting React Native out-of-the-box, and offering a VSCode-like theming format that allows for easy theme integration or programmatic theme creation. It powers syntax highlighting in frameworks like Docusaurus and provides utilities for custom language support and token normalization, making it a flexible choice for displaying code snippets.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install prism-react-renderer"],"cli":null},"imports":["import { Highlight } from 'prism-react-renderer'","import { themes } from 'prism-react-renderer'","import { normalizeTokens } from 'prism-react-renderer'","import { useTokenize } from 'prism-react-renderer'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from \"react\"\nimport ReactDOM from \"react-dom/client\"\nimport { Highlight, themes } from \"prism-react-renderer\"\n\nconst codeBlock = `\nconst GroceryItem: React.FC<GroceryItemProps> = ({ item }) => {\n  return (\n    <div>\n      <h2>{item.name}</h2>\n      <p>Price: {item.price}</p>\n      <p>Quantity: {item.quantity}</p>\n    </div>\n  );\n}\n`\n\nexport const App = () => (\n  <Highlight\n    theme={themes.shadesOfPurple}\n    code={codeBlock}\n    language=\"typescript\"\n  >\n    {({ className, style, tokens, getLineProps, getTokenProps }) => (\n      <pre style={style} className={className}>\n        {tokens.map((line, i) => (\n          <div {...getLineProps({ line, key: i })}>\n            {line.map((token, key) => (\n              <span {...getTokenProps({ token, key })} />\n            ))}\n          </div>\n        ))}\n      </pre>\n    )}\n  </Highlight>\n);\n\nReactDOM.createRoot(document.getElementById('root')!).render(<App />)\n","lang":"typescript","description":"This quickstart demonstrates how to use the <Highlight /> component with a built-in theme and custom rendering logic.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}