Using PrismJS as a Syntax Highlighter in React

PrismJS is a library written using JavaScript, which is used for syntax highlighting or code highlighting. It's one of the most popular libraries used by millions of websites to highlight code blocks. Why PrismJS? There are various other libraries such as highlight.js, Syntaxhighlighter, Rainbow etc. However, Prism stands out as unique among the crowd because of the various features it offers. Prism is very lightweight (2KB), intuitive, blazing-fast, and extensible compared to other libraries. Features of PrismJS Let's take a look at the core features of Prism. For the entire set of features, refer to the official PrismJS website. Very Lightweight, the core library is of 2KB Size when minified and gzipped. Supports a wide variety of languages. According to the official documentation, it supports 275+ languages. Easy to implement on any tech stack like WordPress, React, Angular etc PrismJS can be easily extended with the help of a hook and without modifying the code. Easy to extend or define new languages with the understanding of regular expression. Supports most browsers; Edge, IE11, Firefox, Chrome, Safari, Opera. Enforces the use of the mark up and also supports inline code with tags. The language is defined using the HTML5 draft recommendation: through a language-xxxx class. <code> <pre> How to add Prism.js Syntax Highlighting to any Website? Implementation of PrismJS is straightforward and does not require much in-depth coding knowledge. Download the PrismJs library from the official website by clicking on the download button. Step 1: Select the minified version, the theme you like, and checkmark all the coding languages that you want Prism to recognize and highlight in your website or article. There are plugins for Prism which provide additional features. if you need those, you could select the relevant plugins using the checkbox. Once you have finished the selection, click on the Download JS and Download CSS button at the bottom of the page to download the generated prism.js and prism.css files. Step 2: Include the prism.css and prism.js files that you have downloaded on the HTML page, as shown below. Step 3: <!DOCTYPE html>
<html>
<head>
	...
    <link href="css/prism.css" rel="stylesheet" />
</head>
<body>
	...
    <script src="js/prism.js"></script>
</body>
</html> The files are included, and you are ready to use them as a syntax highlighter. Let’s highlight some CSS code as an example. Step 4: If you want to highlight CSS code, you need to use the class “language-css”. For JavaScript, it will be “lang-js” or “lang-JavaScript“. For CSS <pre><code class="language-css">p { color: red }</code></pre> For JavaScript <pre><code class="language-js">console.log("Hello World")</code></pre> Do not add any space between the <pre> and <code> the same will be displayed on the page. Also since it’s a plain HTML do not add any line breaks inside the <pre> and <code> tags. Note: For the entire list of classes for each language, you can refer to https://prismjs.com/#languages-list How to get PrismJS Working in React Step 1: Install the PrismJS and babel-plugin-prismjs package using the npm command as shown below. The babel plugin is responsible for loading the CSS and language support for Prism.js. To make it easy to configure your Prism instance with only the languages and plugins you need, use the babel plugin . This will allow you to load the minimum number of languages and plugins to satisfy your needs. Note: babel-plugin-prismjs $ npm install prismjs $ npm install babel-plugin-prismjs In your , register the plugin and configure its dependencies. Here you can set the languages, themes, plugins etc. If you do not already have a .babelrc file, create one in the root folder of your source code and add the following JSON to the .babelrc file. Step 2: .babelrc {
  "plugins": [
    ["prismjs", {
        "languages": ["javascript", "css", "markup"],
        "plugins": ["line-numbers"],
        "theme": "okaidia",
        "css": true
    }]
  ]
} Create a simple react component code.js and import PrismJS into your react component and configure the component to read the language props from App.js Below is the snippet of the code.js component. Step 3: import React, { useEffect } from "react";
import Prism from "prismjs";

export default function Code({ code, language }) {
  useEffect(() => {
    Prism.highlightAll();
  }, []);
  return (
    <div className="Code">
      <h2> Code Syntax Block {language}</h2>
      <pre>
        <code className={`language-${language}`}>{code}</code>
      </pre>
    </div>
  );
} In the App.js import and call the code component as shown below. Pass the props (language and code syntax) dynamically to the code component. Step 4: <Code code={JSCode} language="javascript" /> <Code code={htmlCode} language="html" /> app.js code for your reference. import React from "react";
import Code from "./components/Code";

const JSCode = `const App = props => {
  return (
    <div>
      <h1> Prism JS </h1>
      <div>Awesome Syntax Highlighter</div>
    </div>
  );
};
`;

const htmlCode = `
    <div>
      <h1> PrismJS Tutorial </h1>
      <p>
      Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind.
      </p>
    </div>
`;

export default function App() {
  return (
    <div className="App">
      <Code code={JSCode} language="javascript" />
      <Code code={htmlCode} language="html" />
    </div>
  );
} Run the react application using and you should see PrismJS highlighting the code automatically. Step 5: npm run start The sample PrismJS React tutorial is hosted in the , feel free to download and modify according to your needs. Github repo First published here

Mind

Quick Guide to the Python Ord Function

3 Efficient Ways to Reverse a List in Python

catchsrinivas

Nominated for 2022 - HackerNoon Contributor of the Year - Programming

Nominated for 2022 - Pythonistas Paradise

Nominated for Coding Guru of 2022

Too Long; Didn't Read

Make resilience your competitive advantage

Using PrismJS as a Syntax Highlighter in React

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

3 Efficient Ways to Reverse a List in Python

$2M Backing and a Vision: How GAM3S.GG is Reshaping Web3 Gaming

$1M Hackathon Prizes Announced By MultiversX to Expand the Blockchain Ecosystem

Windows Sticky Keys Exploit: The War Veteran That Never Dies

$PEPE, a Purple Lamborghini, and More: The Story Continues

3 Efficient Ways to Reverse a List in Python

$2M Backing and a Vision: How GAM3S.GG is Reshaping Web3 Gaming

$1M Hackathon Prizes Announced By MultiversX to Expand the Blockchain Ecosystem

Windows Sticky Keys Exploit: The War Veteran That Never Dies

$PEPE, a Purple Lamborghini, and More: The Story Continues

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps