How to Add Prism.js Syntax Highlighting in Blogger?

Read the original article published on our official blog to see the working previews and demos in this article.

Hello Bloggers!

After a long coding journey here's a new post related to blog customisation on blogger. In the previous post for adding Lottie animations blogger, we tried to add some animations to the website.

Now we will add an automatic syntax highlighter for codes.

So, What is a Syntax highlighter?

keep reading for the answer if you don't know what is it and why you need it in your blog. And if you have a dev blog you must have it.

So let's start coders...

Prism.js

First of all, let me tell you what is a syntax highlighter?

If you are a programmer or a software developer you may have used some code editors or IDE's like vscode, sublime, android studio. Most of them make our code colourful like a rainbow, have a different colour for every syntax, and support almost every programming language.

So their ability to differentiate the syntax in colours is called syntax highlighting. This is not an official definition but I'm just trying to make you understand in simple words.

There are many syntax highlighting options available for the web like highlight.js, prism.js, rainbow etc.

Each of them does their work perfectly, and have varieties of themes and plugins for them.

Why prism.js?

You must be thinking why prism.js and not other solutions?

Other syntax highlighters are good but prism.js is one step further. Many websites like CSS-tricks, smashing magazine, stripe, react and MySQL uses prism.js as their syntax highlighter for websites.

Have a look at the following code which is highlighted by the prism library.

Let us see the features of the prism.js library which make it the best syntax highlighter for web content.

Features of Prism.js

Prism has the following features and some of them are not available from other syntax highlighters,

Dead Simple. The code includes two files. prism.js and prism.css. And uses the proper HTML5 tags for naming languages(code.language-XXXX).

Lightweight library. though it is a javascript library due to its small size it doesn't make any burden on the site speed. The languages and themes have very little size. around 1kb.

Extensible. The best feature of the prism. You can extend languages or use the existing ones. Add new features using the plugins architecture.

Easy Styling. It has a simple and easy customizable CSS code. So you can style it with your own preferences.

These are some of the features of the prism library. Learn more about it on prismjs.com.

Now you know why prism.js is good and what are some features make it a great syntax highlighting solution.

And if you have a dev blog you must add this plugin to your website for a providing your programs in a clear and readable format.

Now let's go for coding...😎

Getting Prism files

Head to the prismjs.com website and click on the download button. You will be directed to the download page and there you have the treasure of themes, languages and plugins supported by the prism library.

Now choose from the development and minified version. I recommend you to go with minified because development versions sometimes have errors and bugs.

Then choose your favourite theme. I prefer the OKAIDIA theme. Why? because it looks good to me. You can see the code below I'm using a customized version of the theme.

@font-face {
  font-family: Chunkfive; src: url('Chunkfive.otf');
}

body, .usertext {
  color: #F0F0F0; background: #600;
  font-family: Chunkfive, sans;
  --heading-1: 30px/32px Helvetica, sans-serif;
}

@import url(print.css);
@media print {
  a[href^=http]::after {
    content: attr(href)
  }
}

Now choose your preferred languages. Don't select unnecessary languages or this will make the file size bigger and directly affect your website loading speed.

Now choose your plugins. Read the following points while choosing plugins.

First check information about each plugin you find useful by clicking on its name.

If you write long codes in a single block, select the copy to the clipboard plugin and when you select it, the toolbar plugin will be automatically selected. Hover the following code then you will see a copy and language button at the top-right corner.

function $initHighlight(block, cls) {
  try {
    if (cls.search(/bno-highlightb/) != -1)
      return process(block, true, 0x0F) +
             ` class="${cls}"`;
  } catch (e) {
    /* handle exception */
  }
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      console.log('undefined');
  }

  return (
    <div>
      <web-component>{block}</web-component>
    </div>
  )
}

export  $initHighlight;

If you are a frontend developer who writes very much CSS guides. Use the previewer plugin so the readers will understand what colours, angles and timings you are using. This plugin previews the colours and other things when hovered. Hover on the colours, angles or time in the code below to see what I mean.

.example-gradient {
    background: -webkit-linear-gradient(left,     #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* Chrome10+, Safari5.1+ */
    background:    -moz-linear-gradient(left,     #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* FF3.6+ */
    background:     -ms-linear-gradient(left,     #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* IE10+ */
    background:      -o-linear-gradient(left,     #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* Opera 11.10+ */
    background:         linear-gradient(to right, #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* W3C */
}
.example-angle {
    transform: rotate(10deg);
}
.example-color {
    color: rgba(255, 0, 0, 0.2);
    background: purple;
    border: 1px solid hsl(100, 70%, 40%);
}
.example-easing {
    transition-timing-function: linear;
}
.example-time {
    transition-duration: 3s;
}

While choosing plugins keep in mind that do not select plugins you don't need or it will affect your site speed.

Now download both JavaScript and CSS files and upload them to your site. Blogger users can upload it to GitHub gists or google drive.

Now add the following code to your source.

<!--[ Add this code between <head> and </head> tags]-->

<link href="path_to_your_prism.css" rel="stylesheet" />

<!--[ Add this code before the </body> tag]-->

<script src="path_to_your_prism.js" type="text/javascript"></script>

or you can just copy the CSS and JavaScript from the files and directly add them.

Blogger users must add the CSS and JavaScript code between the ![CDATA[/* or the code will not work.

Keep in mind add the CSS between

and tag and the JavaScript between and .

Now save the template or code.

add the following code to a post on your site and hit preview or publish.

<!--[ This is a demo code ]-->
<pre><code class="language-css line-numbers match-braces">

.example-gradient {
    background: -webkit-linear-gradient(left,     #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* Chrome10+, Safari5.1+ */
    background:    -moz-linear-gradient(left,     #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* FF3.6+ */
    background:     -ms-linear-gradient(left,     #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* IE10+ */
    background:      -o-linear-gradient(left,     #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* Opera 11.10+ */
    background:         linear-gradient(to right, #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* W3C */
}
.example-angle {
    transform: rotate(10deg);
}
.example-color {
    color: rgba(255, 0, 0, 0.2);
    background: purple;
    border: 1px solid hsl(100, 70%, 40%);
}
.example-easing {
    transition-timing-function: linear;
}
.example-time {
    transition-duration: 3s;
}</code></pre>

If you see the following result. You are good to go further in styling and adding plugins.

.example-gradient {
    background: -webkit-linear-gradient(left,     #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* Chrome10+, Safari5.1+ */
    background:    -moz-linear-gradient(left,     #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* FF3.6+ */
    background:     -ms-linear-gradient(left,     #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* IE10+ */
    background:      -o-linear-gradient(left,     #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* Opera 11.10+ */
    background:         linear-gradient(to right, #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* W3C */
}
.example-angle {
    transform: rotate(10deg);
}
.example-color {
    color: rgba(255, 0, 0, 0.2);
    background: purple;
    border: 1px solid hsl(100, 70%, 40%);
}
.example-easing {
    transition-timing-function: linear;
}
.example-time {
    transition-duration: 3s;
}