How to use PrismJS in ReactJS

Introduction

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

For more info on PrismJS Click Here

Install PrismJS using npm

I assume that your React project is configured correctly. After your React project is up and running. Install PrismJS on the terminal.

npm i prismjs

After we have installed prismjs we will import

• Language Support
• Themes
• Plugins

Import Prism and Theme in your project

Here we are importing PrismJS and the Theme.

import Prism from "prismjs"; // Prism
import "prismjs/themes/prism-okaidia.min.css"; // Import theme

Themes are stored in the prismjs/themes/ directory. Here are all the possible themes supported by PrismJS.

• prism-coy.min.css
• prism-dark.min.css
• prism-funky.min.css
• prism-okaidia.min.css
• prism-solarizedlight.min.css
• prism-tomorrow.min.css
• prism-twilight.min.css

Add language support and Plugins

In order to enable syntax highlighting we need the language from the 'prismjs/componenent/' directory. In this project we are going to highlight C++ code.

We are going to import plugins from the prismjs/plugins directory.

And we are going to use the normalize-whitespace plugin to remove all leading and trailing spaces in the code.

// C is required for C++ highlighting to work
require("prismjs/components/prism-c");

// Add language support for C++
require("prismjs/components/prism-cpp");

// To remove extra white spaces
require("prismjs/plugins/normalize-whitespace/prism-normalize-whitespace");

To see which plugins are supported in PrismJS Click Here

How to put code in HTML

After we have imported all the required files. We are place your code inside the pre > code tags, like the example below. Here, xxxx is the name of the language

To see all the languages supported by PrismJS Click Here

<pre>
  <code className="language-xxxx">
    <!-- Your code here -->
  </code>
</pre>

But, wait. It is not over yet, the syntax highlighting will not work yet now. We have to call the Prism.highlighAll() function to highlight our code after rendering the html.

Final Code Example

Now the final code. Here we are going to call the Prism.highlightAll() function inside useEffect() hook. This will highlight our code after the Component is rendered.

import Prism from "prismjs"; // Prism
import "prismjs/themes/prism-okaidia.min.css"; // Import theme

require("prismjs/components/prism-c");
require("prismjs/components/prism-cpp");
require("prismjs/plugins/normalize-whitespace/prism-normalize-whitespace");

function App() {

  useEffect(() => {
    Prism.highlightAll();
  });

  return (
    <pre>
      <code className="language-cpp">
        // Your First C++ Program

        #include <iostream>

        int main() {
            std::cout << "Hello World!";
            return 0;
        }


      </code>
    </pre>
  );
}

And now the rendered App component will have code highlighting enabled

Note: This process also works on NextJS