Prism.js is a light-weight, 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.

Follow the below steps to use Prism.js Syntax highlighter to the website

  1. Navigate to the Prism.js Download Page https://prismjs.com/download.html
  2. 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.
  3. Once selected, download the JS and CSS file from the bottom of the same page
  4. Now you have downloaded prism.js and prism.css.Add the two files to your project folders.
  5. 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>
  1. 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, you can find the code to be highlighted using the Prism.js.

Footnotes:

  1. Prism.js – Github Repository (https://github.com/PrismJS/prism)