Prism.js is a lightweight and extensible syntax highlighting library for web development. It allows you to add beautiful and customizable code highlighting to your web pages. It supports a wide range of programming languages and markup formats, making it suitable for displaying code snippets and examples. We'll go over how to implement Prism.js below.

Installing Prism.js

$ npm install prismjs

The first step is to install `prismjs` into our dependencies. This will allow us to import the function and specific stylings we want to use in our project.

Importing "prismjs" into the component

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

The next step is to import the `Prism` function and the CSS stylings to be used on the code snippet. In our case, we will import the "twilight" theme for the stylings.

Setting up a Component wrapper

const PrismComponent = ({ children }) => {
  const codeRef = useRef(null);

  useEffect(() => {
    const highlight = async () => {
      await Prism.highlightAll(); 
    };
    highlight();
  }, []);

  return (
    <pre className="">
      <code ref={codeRef} className="language-javascript bg-[#1b1d20]">
        {children}
      </code>
    </pre>
  );
};

The next step is to create a higher-order-component to be used as a wrapper for the code is to be our snippet. The useRef hook is used to create a reference to the code element in the DOM. This allows direct access and manipulation of the underlying DOM node. The useEffect hook is used to run the code for syntax highlighting using Prism.js. It runs only once when the component mounts.

Inside the highlight function, Prism.highlightAll() is called to apply syntax highlighting to the code element. The component returns a pre element containing the code element. The ref attribute is set to the codeRef for referencing the code element. The `className` prop is used to set the desired classes for styling the code block. The children prop contains the code content that will be highlighted by Prism.js.

Implementing the HoC

//..
import PrismComponent from './PrismComponent';

//..

  <div className="overflow-y-auto code-snippet">
    <PrismComponent>
      {code}
    </PrismComponent>
  </div>

//..

Finally, we import the HoC we made and simply wrap our passed in code with the PrismComponent tags. When running the page, the code snippet will now present itself with the Prism.js stylings.

Bonus: making custom stylings to Prism styles

Although Prism.js has a good handful of themes to choose from, they also provide a way to implement custom stylings. To do this, we first go to their page and click the "DOWNLOAD" button. This will take us to a page where we can select which languages and libraries we want to create snippets of.

In our case, we want to also add in React JSX or React TSX. Once the appropriate check boxes are checked, scroll down to the bottom of the page, and there will be a JavaScript script and CSS stylings.

We want to use the CSS stylings here to copy/paste into a CSS file in our Component. In the new CSS file, we can make changes to color, backgroundColor, padding, etc.