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.
- Visit this page
- Select a theme of your choice
- Select all the languages you need
- Select a plugin if needed
- 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.
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. 🙂