{"id":15167,"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.","status":"active","version":"2.4.1","language":"javascript","source_language":"en","source_url":"https://github.com/FormidableLabs/prism-react-renderer","tags":["javascript","typescript"],"install":[{"cmd":"npm install prism-react-renderer","lang":"bash","label":"npm"},{"cmd":"yarn add prism-react-renderer","lang":"bash","label":"yarn"},{"cmd":"pnpm add prism-react-renderer","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for the React component.","package":"react","optional":false}],"imports":[{"note":"Main component for rendering highlighted code. Primarily used with ESM imports.","wrong":"const { Highlight } = require('prism-react-renderer')","symbol":"Highlight","correct":"import { Highlight } from 'prism-react-renderer'"},{"note":"Named export providing built-in themes (e.g., `themes.shadesOfPurple`).","wrong":"import themes from 'prism-react-renderer/themes'","symbol":"themes","correct":"import { themes } from 'prism-react-renderer'"},{"note":"Utility function for normalizing token arrays, exported since v2.3.1.","symbol":"normalizeTokens","correct":"import { normalizeTokens } from 'prism-react-renderer'"},{"note":"Utility hook for tokenizing code, exported since v2.3.1, useful for custom rendering flows.","symbol":"useTokenize","correct":"import { useTokenize } from 'prism-react-renderer'"}],"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 = ({ item }) => {\n return (\n
\n

{item.name}

\n

Price: {item.price}

\n

Quantity: {item.quantity}

\n
\n );\n}\n`\n\nexport const App = () => (\n \n {({ className, style, tokens, getLineProps, getTokenProps }) => (\n 
\n        {tokens.map((line, i) => (\n          
\n            {line.map((token, key) => (\n              \n            ))}\n          
\n        ))}\n
\n )}\n \n);\n\nReactDOM.createRoot(document.getElementById('root')!).render()\n","lang":"typescript","description":"This quickstart demonstrates how to use the component with a built-in theme and custom rendering logic."},"warnings":[{"fix":"Review the changelog for alternative approaches to theme management if you relied on internal APIs.","message":"The `theme dictionary hook` was removed in v2.4.1. If you were using this internal hook, your code will break.","severity":"breaking","affected_versions":">=2.4.1"},{"fix":"Refer to the 'Upgrading from v1 to v2' section in the package README for a detailed migration path. This often involves changes in how themes are applied or prop structures.","message":"Upgrading from v1 to v2 involved significant changes. Specific breaking changes are documented in the upgrade guide.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Install `react` and `react-dom` if not already present: `npm install react react-dom` or `yarn add react react-dom`.","message":"Prism React Renderer requires `react` as a peer dependency. Ensure you have `react` installed in your project at a compatible version.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"If using a custom Prism instance, pass it via the `prism` prop: ``. This is an 'escape-hatch' for advanced use cases.","message":"When using custom Prism setups, ensure the `prism` prop is correctly passed to the `Highlight` component to avoid issues with language definitions or tokenization.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"No specific fix required if your environment supports RSC, but be aware of how components behave in server-side vs. client-side contexts.","message":"Since v2.4.1, React Server Components (RSC) are supported. If deploying to an RSC environment, ensure your setup is compatible with this change.","severity":"gotcha","affected_versions":">=2.4.1"}],"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 is a valid Prism language. If using a custom Prism instance, verify it's correctly passed to the `prism` prop. Check for `prism-react-renderer`'s bundled languages or add custom ones via the escape-hatch.","cause":"The Prism instance is not correctly loaded or accessible, often when attempting to highlight a language that isn't registered or if the custom Prism prop is misconfigured.","error":"TypeError: Cannot read properties of undefined (reading 'languages')"},{"fix":"Verify the import statement: `import { Highlight } from 'prism-react-renderer'`. Ensure React and ReactDOM are properly installed and configured for your project.","cause":"Often indicates that the `Highlight` component was not imported correctly, or there's a problem with the React environment.","error":"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined."},{"fix":"Use one of the `themes` exported by `prism-react-renderer` (e.g., `themes.shadesOfPurple`) or ensure your custom theme object is valid. Version 2.0.5 fixed a bug where an undefined theme would cause a runtime error, so ensure you are on a recent version if this issue persists.","cause":"The `theme` prop received an `undefined` value, which can happen if a theme isn't found or loaded correctly.","error":"Unhandled Rejection (TypeError): theme is undefined"}],"ecosystem":"npm"}