43
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...

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.
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.
Prism has the following features and some of them are not available from other syntax highlighters,
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...๐
@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)
}
}
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;
.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;
}
<!--[ 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;
}
Now you are ready to add beautiful colourful codes to your site. If there is any problem you can ask me in the comments. Always ready to helpโ.
If you find this post helpful, visit our official blog at devtejas.me
43