Prismjs – The Best Syntax Highlighter

If you are writing some blog that contains code blocks, syntax highlighter is required. It makes your codes look pretty and organized. In this blog, I’ll explain how you can use Prismjs inside your project.

Download Prismjs

If you are working on a complex project you can use npm install prismjs to install and use Prismjs on your project but we are going to take a manual approach as most of the time this will be easy to set up and use.

  1. Visit this page
  2. Select a theme of your choice 
  3. Select all the languages you need 
  4. Select a plugin if needed
  5. Download the CSS and js file.

Once you visit the Prismjs download page you will see its self-explanatory. They have everything in small bundles so you will only get what you need nothing more also you can see you’re file size while selecting them.

Prismjs download page
My Prismjs configs

The above picture is how I selected for my site. You are free to add different languages based on your need. My Prismjs CSS file size is 2kb and 15kb for js.

Add Prismjs to your project

Once you downloaded the js and CSS files, simply you can add the CSS file to your site’s head and the js file to the bottom like any other CSS and js files.

How to use Prismjs 

After adding your CSS and js file to your project you can use it simply by adding a class to your code block. For example –

<code class="language-html">
    <i id="toggle_theme_button" aria-hidden="true" class=""></i>
</code>

In the above code, you see the langage-html or short lang-html class this is how you add highlighter to your code. If the above code block was javascript the class name would be language-javascript or short lang-js. If you add a class name not recognized or you didn’t select that language when downloading the Prismjs CSS and JS file you will see a default style no highlight.

Hope you get the idea of how you can use Prismjs on your project. Keep your surroundings clean and green. 🙂

Dipankar Maikap

Dipankar Maikap

I'm a freelance web developer. I work out of Kolkata, India. My favorite number is 77.

Leave a Reply

Your email address will not be published. Required fields are marked *