Get PrismJS working in React

In their own words: Prism is a lightweight, extensible syntax highlighter — meaning it can be used to highlight code blocks or code samples in a website.

A bit like the way we can display markup in Medium, as below:

onSubmit(e) {
  e.preventDefault();
  const job = {
     title: 'Developer',
     company: 'Facebook' 
  };
}

Only with Prism, we get a lot more control over styling. Which means we can make coding tutorials look as awesome as the likes of CSS tricks and documentation as clear as that of React.js

CSS Tricks — looking 🔥

React use Prism.js to highlight code in their documentation

How to get Prism working with create-react-app — super quick.

Step 1: Open up the terminal and install prismjs with npm

$ npm install prismjs

Step 2: Import prismjs into your component

import React from "react";
import Prism from "prismjs";

Step 3: Select your preferred theme type from the prism website — ( I like Okadia) and hit that rather large DOWNLOAD CSS button at the foot of the page. (Quick note: to preview theme types, you’ll have to scroll between the theme section and foot of the page).

Then simply add the prism.css file to your corresponding ‘src’ directory (I use a separate stylesheet per component) and remember to import the file to the component.

import React from "react";
import Prism from "prismjs;
import "../css/prism.css";

Step 4: In your desired component, create your code block using the semantic <pre> and <code> HTML5 tags. Prism works by changing the code within these tags to make it appear as though it’s been written in a code editor.

We also need to wrap the code with ES6 template strings - back-ticks wrapped in curly braces, like so {`code goes here`}

So, using our example code block from before:

<pre>
  <code>
  {`
    onSubmit(e) {
      e.preventDefault();
      const job = {
        title: 'Developer',
        company: 'Facebook' 
        };
      }
  '}
  </code>
</pre>

Want to learn more about the <pre> & <code> tags — this stack overflow thread has you covered

Step 5: add the relative className for the language

For CSS:

<pre>
  <code className=”language-css”>
    .btn--green {
     background-color: #bada55;
    }

For JavaScript:

<pre>
  <code className="language-javascript">
    onSubmit(e) {
      ....

Step 6: Open the browser, preview the site, and….oh! Why’s it not working…?

If you hit refresh…you’ll see Prism spring to life and your syntax looks sweet — so why will it not load when the page is initially rendered?

Because we’re using React and therefore JavaScript to render the page we need to re-run Prism when the component mounts, as Prism has not yet been called to run on the component — kinda fussy huh! (this is one of those issues that can leave you scratching your head for a couple of hours).

When the page loads, Prism drops an object on the page with a bunch of methods, and we can use one of these methods to initialise the library.

Prism.highlightAll()

We then use one of React’s built-in lifecycle methods to run prism when the component mounts:

componentDidMount() {}

Place it directly after the component class definition, as below:

class Codeblock extends React.Component {
  componentDidMount() {
    Prism.highlightAll();
  }
render() {
  return (

Preview your site once more and voila…there you have it…🔥

This is by no means the only way, right way, best way to get Prism working with React. You don’t need to use npm, you could simply use the raw JavaScript file, or you could use the CDN version, and improve performance. This is just one simple route to get things up and running, break down the learning barriers and either move on to the next challenge, or get stuck in with customising Prism further.

Let me know if it helps…