Add Prism.js – Syntax highlighter to the Website

Prism.js is a lightweight, open-source, easy-to-use syntax highlighter that can be added to your website and blogs in minutes.

It is highly customizable so that you can choose the languages and plugins necessary for your website.

Navigate to the Prism.js Download Page https://prismjs.com/download.html
Select the necessary customizations such as the themes suitable for your website, what are all the languages used, and any needed plugins like line highlight, line numbers, Copy to clipboard option, etc.
Once selected, download the JS and CSS files from the bottom of the same page
Now you have downloaded prism.js and prism.css.Add the two files to your project folders.
Then include the JS and CSS file in the header of your webpage.

<html> <head>
<link rel="stylesheet" href="prism.css"/>
<script src="prism.js"></script>
</head>
<body> </body>
</html>

Enclose your code to be highlighted inside the pre and code tags. Add the class language-XXXX to the code tag. Look into the example on how to use Prism.js with a javascript code.

var a = 3;
var b = 4;
function add(){
 console.log("Sum is :"+(a+b));
}
add();

Now, Open the webpage in your browser, and you can find the code to be highlighted using Prism.js.

Eswari's Blog