npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details


  • User packages



Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.


Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2023 – Pkg Stats / Ryan Hefner




Renders highlighted Prism output using React




Maintenance Status


Maybe you need to render some extra UI with your Prismjs-highlighted code, or maybe you'd like to manipulate what Prism renders completely, or maybe you're just using Prism with React and are searching for an easier, global-pollution-free way?

Then you're right where you want to be!


This library tokenises code using Prism and provides a small render-props-driven component to quickly render it out into React. This is why it even works with React Native! It's bundled with a modified version of Prism that won't pollute the global namespace and comes with a couple of common language syntaxes.

(There's also an escape-hatch to use your own Prism setup, just in case)

It also comes with its own VSCode-like theming format, which means by default you can easily drop in different themes, use the ones this library ships with, or create new ones programmatically on the fly.

(If you just want to use your Prism CSS-file themes, that's also no problem)

Table of Contents


This module is distributed via npm which is bundled with node and should be installed as one of your project's dependencies:

# npm
npm install --save prism-react-renderer
# yarn
yarn add prism-react-renderer
# pnpm
pnpm add prism-react-renderer

Prism React Renderer has a peer dependency on react


Prism React Renderer has a named export for the <Highlight /> component along with themes. To see Prism React Render in action with base styling check out packages/demo or run pnpm run start:demo from the root of this repository.

import React from "react"
import ReactDOM from "react-dom/client"
import { Highlight, themes } from "prism-react-renderer"
import styles from 'styles.module.css'

const codeBlock = `
const GroceryItem: React.FC<GroceryItemProps> = ({ item }) => {
  return (
      <p>Price: {item.price}</p>
      <p>Quantity: {item.quantity}</p>

export const App = () => (
    {({ className, style, tokens, getLineProps, getTokenProps }) => (
      <pre style={style}>
        {, i) => (
          <div key={i} {...getLineProps({ line })}>
            <span>{i + 1}</span>
            {, key) => (
              <span key={key} {...getTokenProps({ token })} />

ReactDOM.createRoot(document.getElementById("root") as HTMLElement)
        .render(<App />)

Custom Language Support

By default prism-react-renderer only includes a base set of languages that Prism supports. Depending on your app's build system you may need to await the import or use require to ensure window.Prism exists before importing the custom languages. You can add support for more by including their definitions from the main prismjs package:

import { Highlight, Prism } from "prism-react-renderer";

(typeof global !== "undefined" ? global : window).Prism = Prism
await import("prismjs/components/prism-applescript")
/** or **/

Basic Props

This is the list of props that you should probably know about. There are some advanced props below as well.

Most of these advanced props are included in the defaultProps.


function({}) | required

This is called with an object. Read more about the properties of this object in the section "Children Function".


string | required

This is the language that your code will be highlighted as. You can see a list of all languages that are supported out of the box here. Not all languages are included and the list of languages that are currently is a little arbitrary. You can use the escape-hatch to use your own Prism setup, just in case, or add more languages to the bundled Prism.


string | required

This is the code that will be highlighted.

Advanced Props


PrismTheme | optional; default is vsDark

If a theme is passed, it is used to generate style props which can be retrieved via the prop-getters which are described in "Children Function".

Read more about how to theme prism-react-renderer in the section "Theming".


prism | optional; default is the vendored version

This is the Prismjs library itself. A vendored version of Prism is provided (and also exported) as part of this library. This vendored version doesn't pollute the global namespace, is slimmed down, and doesn't conflict with any installation of prismjs you might have.

If you're only using Prism.highlight you can choose to use prism-react-renderer's exported, vendored version of Prism instead.

But if you choose to use your own Prism setup, simply pass Prism as a prop:

// Whichever way you're retrieving Prism here:
import Prism from 'prismjs/components/prism-core';

<Highlight prism={Prism} {/* ... */} />

Children Function

This is where you render whatever you want to based on the output of <Highlight />. You use it like so:

const ui = (
    {highlight => (
      // use utilities and prop getters here, like highlight.className, highlight.getTokenProps, etc.
      <pre>{/* more jsx here */}</pre>

The properties of this highlight object can be split into two categories as indicated below:


These properties are the flat output of <Highlight />. They're generally "state" and are what you'd usually expect from a render-props-based API.

| property | type | description | | ----------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------- | | tokens | Token[][] | This is a doubly nested array of tokens. The outer array is for separate lines, the inner for tokens, so the actual content. | | className | string | This is the class you should apply to your wrapping element, typically a <pre> |

A "Token" is an object that represents a piece of content for Prism. It has a types property, which is an array of types that indicate the purpose and styling of a piece of text, and a content property, which is the actual text.

You'd typically iterate over tokens, rendering each line, and iterate over its items, rendering out each token, which is a piece of this line.

prop getters

See Kent C. Dodds' blog post about prop getters

These functions are used to apply props to the elements that you render. This gives you maximum flexibility to render what, when, and wherever you like.

You'd typically call these functions with some dictated input and add on all other props that it should pass through. It'll correctly override and modify the props that it returns to you, so passing props to it instead of adding them directly is advisable.

| property | type | description | | --------------- | -------------- | ----------------------------------------------------------------------------------------------------- | | getLineProps | function({}) | returns the props you should apply to any list of tokens, i.e. the element that contains your tokens. | | getTokenProps | function({}) | returns the props you should apply to the elements displaying tokens that you render. |


You need to add a line property (type: Token[]) to the object you're passing to getLineProps; It's also advisable to add a key.

This getter will return you props to spread onto your line elements (typically <div>s).

It will typically return a className (if you pass one it'll be appended), children, style (if you pass one it'll be merged). It also passes on all other props you pass to the input.

The className will always contain .token-line.


You need to add a token property (type: Token) to the object you're passing to getTokenProps; It's also advisable to add a key.

This getter will return you props to spread onto your token elements (typically <span>s).

It will typically return a className (if you pass one it'll be appended), children, style (if you pass one it'll be merged). It also passes on all other props you pass to the input.

The className will always contain .token. This also provides full compatibility with your old Prism CSS-file themes.


The defaultProps you'd typically apply in a basic use-case, contain a default theme. This theme is vsDark.

While all classNames are provided with <Highlight />, so that you could use your good old Prism CSS-file themes, you can also choose to use prism-react-renderer's themes like so:

import { Highlight, themes } from 'prism-react-renderer';

<Highlight theme={themes.dracula} {/* ... */} />

These themes are JSON-based and are heavily inspired by VSCode's theme format.

Their syntax, expressed in Flow looks like the following:

  plain: StyleObj,
  styles: Array<{
    types: string[],
    languages?: string[],
    style: StyleObj

The plain property provides a base style-object. This style object is directly used in the style props that you'll receive from the prop getters, if a theme prop has been passed to <Highlight />.

The styles property contains an array of definitions. Each definition contains a style property, that is also just a style object. These styles are limited by the types and languages properties.

The types properties is an array of token types that Prism outputs. The languages property limits styles to highlighted languages.

When converting a Prism CSS theme it's mostly just necessary to use classes as types and convert the declarations to object-style-syntax and put them on style.



Maintenance Status

Active: Formidable is actively working on this project, and we expect to continue for work for the foreseeable future. Bug reports, feature requests and pull requests are welcome.