Using Prism in a React App

Prism is an easy to use syntax highlighter, with only a minor "gotcha" if you're using it in a React application. Here's how to not get stuck.

October 16th, 2019


Why Prism?

Prism is one of the best syntax highlighters in the game. It can turn your boring code snippets into colorful and smooth pieces of code. It's easy to set up, comes with minimal overhead, and is a simple way to breathe new life into your code snippets.

Without Prism

`const hello = "Hello World!";`

With Prism

const hello = "Hello World!";

Usage

I'm going to be assuming that you're using npm and at least React v16.8 (The One with Hooks).

Installation

npm install prismjs

Adding CSS

Prism needs to access a stylesheet in order to apply it's styles to your code block. The easiest way to do this is to include a link to the stylesheet via Prism's CDN.

public/index.html

<!DOCTYPE html>
  <html lang="en">
    <head
      <link
        href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism.min.css"
        rel="stylesheet"
      />
    </head>
    <body>
    </body>
  </html>

The Component

src/components/codeDisplay.js

import React from 'react'

const Code = ({ code, language }) => {
  return (
    <pre className={`language-${language} code`}>
      <code className={`language-${language}`}>{code}</code>
    </pre>
  )
}

export default Code

src/components/app.js

import React from 'react'
import Code from './codeDisplay'

const App = () => {
  return (
    <Code code={`const hello = "Hello World!";`} language="javascript" />
  )
}

export default App

This is almost all you need to get up and running. Your code will be displayed in the <Code /> component.

The Gotcha

There is one pretty in your face gotcha. When you refresh the page for the first time, you'll notice your syntax just looks grey and not highlighted at all.

The Anti-Gotcha

Luckily, there's a way to fix that. Modify your <Code /> component like so:

src/components/codeDisplay.js

import React, { useEffect } from 'react'
import Prism from 'prismjs'

const Code = ({ code, language }) => {
  useEffect(() => {
    Prism.highlightAll()
  }, [])

  return (
    <pre className={`language-${language} code`}>
      <code className={`language-${language}`}>{code}</code>
    </pre>
  )
}

export default Code

We are now importing Prism from 'prismjs', the npm package we installed earlier. Prism has a handful of useful methods, one of which is called highlightAll(). This method can be thought of as "seek out all code snippets, and prism-itize them". We use React's useEffect() to call this method just like we would with componentDidMount(). (In fact, we could've used a Class function and componentDidMount(), but at the time of this article, hooks are the new hotness).

Now if you give your page a refresh, Prism will highlight all code snippets within your <Code /> component.

A pretty easy fix with a nice payoff.

Conclusion

Prism is a wonderful tool for syntax highlighting that should be a part of any site that includes code snippets. It's easy to use, with only one minor gotcha that you will most likely run into.

Alternatives

There are some other syntax highlighters besides Prism, but I haven't given them too much of a try yet.

Highlight.js - Highlight.js - Syntax highlighting for the Web

Prettify - Google - An embeddable script that makes source-code snippets in HTML prettier.

Resources

Prism - PrismJS - Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in thousands of websites, including some of those you visit daily.