prism-react-renderer

prism-react-renderer is a lean React component that tokenizes source code with a vendored, sandboxed copy of Prism and hands you the resulting tokens through a render-props API. Instead of shipping opinionated markup, it gives you tokens, getLineProps, and getTokenProps so you decide exactly how highlighted code is rendered — as <pre>/<span> trees, custom components, or even React Native views.

It ships with over twenty VSCode-inspired themes out of the box and a typed theming format that composes cleanly with SSR and static site generators, which is why it powers syntax highlighting inside Docusaurus and a wide range of other documentation tooling.

What You Get

• A <Highlight> render-props component that returns tokens plus getLineProps/getTokenProps prop getters
• A vendored, sandboxed Prism build that doesn’t pollute window.Prism, plus an escape hatch to bring your own Prism instance
• 20+ built-in VSCode-style themes (Dracula, Night Owl, GitHub, One Dark, and more) with a typed theming format
• Cross-platform support for React DOM and React Native from the same API
• Utility exports (useTokenize, normalizeTokens) for building custom highlighting UIs

Common Use Cases

• Rendering syntax-highlighted code blocks in documentation sites and MDX content (it’s the highlighter behind Docusaurus)
• Building custom code-block components for blogs, changelogs, or in-app code viewers
• Adding live, theme-aware code previews to design systems and component playgrounds
• Highlighting code snippets inside React Native apps where DOM-based highlighters don’t work

Under The Hood

Architecture - The library is a thin, layered wrapper around Prism: the public Highlight component in index.ts injects default prism/theme props and delegates to an internal Highlight (components/highlight.ts), which resolves a theme dictionary via themeToDict, tokenizes the code with the useTokenize hook, and returns a render-props payload (tokens, className, style, getLineProps, getTokenProps) for the caller’s children function to render. useTokenize (components/useTokenize.ts) memoizes on code/grammar/language/prism, runs Prism’s before-tokenize/after-tokenize hooks, and passes raw Prism output through normalizeTokens (utils/normalizeTokens.ts), a non-recursive stack-based walker that flattens Prism’s nested token tree into Token[][] grouped by line, guarding against call-stack overflow on deeply nested grammars.

Tech Stack - Written in TypeScript, built as a pnpm workspace (packages/prism-react-renderer, packages/generate-prism-languages, packages/demo) with tsup for bundling to CJS/ESM/.d.ts, vitest for tests, and changesets for release management. It vendors and patches prismjs@1.29.0 (see patches/prismjs@1.29.0.patch) and depends only on clsx and @types/prismjs at runtime, with react as a peer dependency (>=16.0.0) so it stays framework-version-agnostic.