Implement PrismJs Syntax Highlighting to your Blogger/BlogSpot

As the web becomes more open source and beautiful, programmers and designers are coming up with their own ideas. Syntax Highlighter is the most used code highlighter for websites since it was the first of it's kind and opensource. The web has changed then and now and you need a brand new Syntax highlighting plugin that really looks like the 2012's site
Last updated: 15th April 2017

Still wondering what's PrismJs ? Check it's official page for more information http://prismjs.com/, it's the second generation of syntax highlighting, it is more lightweight and that doesn't affect your page load time at all.

The overall adding procedure is the same as mentioned on the PrismJS official page but there are yet some modifications need to be made if you want it to work properly on Blogger blogs. In this tutorial i will provide the links to minified version of the codes, once you get the idea about adding it, you can use whatever version you want.

Include the files in your template

The first thing you have to do is adding the CSS and JavaScript files, to make Prism Syntax Higlighter work, you just need to add two files into your template and both are less than 10kb. That's a good thing for you Page Speed.

<link rel="stylesheet" href="http://prismjs.com/themes/prism.css"/>
<script type='text/javascript' src="http://prismjs.com/prism.js"></script>

And where to add this ? It is simple, just above the ending </head> tag. Go to your Template -> Edit HTML -> Proceed -> Use CTRL+F to find </head> and paste the HTML script and link tag just above </head>

Note : The links in the script and link tag is only for demo of the code, if you want to use different theme then you can download the version of your choice on PrismJS Download page, upload it to your hosting service and replace the links with your hosted file's links.

Now display codes in your post

Wrapping the display code into <pre> tag is normal for displaying codes on webpages and to display the codes in Prism style you have to do it like this way. (demo for codes display)

The following example is for displaying HTML codes in your pages, to define any languages you have to edit language-xxx

<pre class='language-markup'>
<code>
// Your HTML Code here
</pre>
</code>

Tip: You can add the class for a language to any parent element and the children elements will inherit the defined language. It is very useful when you just want to display codes of the same language in a page.

Escape HTML characters

But in Blogger you have to escape the HTML characters so it don't get interpreted as raw HTML. Use QuickEscape tool to convert Raw HTML into displayable HTML. For example, if you want to display this HTML code

<ul class='make-tea'>
<li>Tea</li>
<li>Water</li>
<li>Sugar</li>
<li>Milk</li>
</ul>

It should be converted into this, so you can paste it into the HTML mode of Blogger post editor to make it displayable

&lt;ul class='make-tea'&gt;
&lt;li&gt;Tea&lt;/li&gt;
&lt;li&gt;Water&lt;/li&gt;
&lt;li&gt;Sugar&lt;/li&gt;
&lt;li&gt;Milk&lt;/li&gt;
&lt;/ul&gt;

The whole code witth <pre> and <code> tag will be then look like this.

<pre class='language-markup'>
<code>
&amp;lt;ul class='make-tea'&amp;gt;
&amp;lt;li&amp;gt;Tea&amp;lt;/li&amp;gt;
&amp;lt;li&amp;gt;Water&amp;lt;/li&amp;gt;
&amp;lt;li&amp;gt;Sugar&amp;lt;/li&amp;gt;
&amp;lt;li&amp;gt;Milk&amp;lt;/li&amp;gt;
&amp;lt;/ul&amp;gt; 
<code>
</pre>

The HTML is then ready to be pasted in your post. In the post editor switch to HTML view and place the code but always remember to escape raw HTMLs.

Languages

To define languages you just have to change the language-xxxx in the class you can find in <pre> and <code> tags.

For HTML we will use this tags to wrap the display codes
```
<pre class='language-markup'>
<code>
// Your HTML Code here
</code>
</pre>
```
language-markup is used for HTML markups. You may use this for XML codes too.

CSS will be wrapped into this tags

<pre class='language-css'>
<code>
// Your CSS Code here
</code>
</pre>

JavaScript can be wrapped into this

<pre class='language-javascript'>
<code>
// Your JS Code here
</pre>
</code>

JQuery can also be displayed with this.

Want to learn more than check out the PrismJS homepage

For Different Themes

The great thing about PrismJS syntax highlighter is that you can make the code blend with your site's overall theme by using different themes provided by PrismJS. There are the following themes available by default for it : default, dark, funky, okaidia, twilight, coy and solarized light

With a single addition of a CSS file you can change the theme for all PrismJS syntax highlighter instances on your blog.
In the first step we added the default theme,

<link rel="stylesheet" href="http://prismjs.com/themes/prism.css"/>
<script type='text/javascript' src="http://prismjs.com/prism.js"></script>

The http://prismjs.com/themes/prism.css in the first line of code sets the theme to default, while the following sets it to its corresponding theme.

Dark

<link rel="stylesheet" href="http://prismjs.com/themes/prism-dark.css"/>

Funky

<link rel="stylesheet" href="http://prismjs.com/themes/prism-funky.css"/>

Okaidia

<link rel="stylesheet" href="http://prismjs.com/themes/prism-okaidia.css"/>

Twilight

<link rel="stylesheet" href="http://prismjs.com/themes/prism-twilight.css"/>

Coy

<link rel="stylesheet" href="http://prismjs.com/themes/prism-coy.css"/>

Solarized Light

<link rel="stylesheet" href="http://prismjs.com/themes/prism-solarizedlight.css"/>

Your feedback

I tried to put as much information as I can but if you find something missing or needs to be reviewed then please drop your comments. Also you can write to us on depy45631@gmail.com or see the contact page.