How to Add Prism Syntax Highlighter in Blogger blog

Highlighting code is quite necessary for me since I always add some reference to my codes I provide. This highlighter helps me to explain my code to my readers much effectively, since they highlight the keywords in the code.

I have already posted the article were I have discuss different syntax highlighter and the features they provide. In that article I have highlighted to use prettify and why I had considered to using it because of its ability to highlighter any codes and no extra plugin is required. Since it can highlight any piece of code, therefore the size of code increases, which was around 18KB to 22KB for me including the CSS code. Because it indirectly increases the page size which is bad for Search engine optimization.

Since webpage doesn’t load faster therefore our blogs bounce rate increases and this leads to decrease in page views. I have to use different syntax highlighter which could solve my problem. And then I find this syntax highlighter called Prism.

I have seen many renowned blogger using this plugin to highlight their code. Prism syntax is very different from any other syntax highlighter out there because of it features it provide. I need to highlight code which includes HTML, CSS and JavaScript mainly. If I need any other code to highlight I could simply download that plugin and add to the core code that is already present in that particular page.

That means my plugin by default will only highlight HTML CSS and JavaScript codes. If required some other code language to highlight I can simply add that plugin in that particular page. This methods lead decrease in the size code which is for me 8KB to 9KB including CSS code which is quite low compared to prettify.

So if you are using prettify or any other syntax highlighter I would highly recommend you to shift to Prism right now and decrease your page view.

How to integrate Prism Syntax Highlighter in your website or blogger?

Make sure to take a backup of your template before proceeding.
Case A: Use this only if you’re main language is other language that of HTML, CSS and JavaScript or you host on Wordpress.

Steps:

Go to this download page and select which themes you want.
Now select which language you want highlight and select which feature you want to add example like line number and line highlighter plugin.
Download JavaScript and CSS code. Add CSS code in your CSS file and add Script in your Head.
Add your code snippets as below.

<pre><code class="language-markup">

</code>
</pre>

Change “markup” to “css” or “javascript” if required.

Case B: If you use HTML, CSS or JavaScript as your main language in web articles or using Blogger Blogs
Steps:

Add this JavaScript just before </body> so that it load last and give more bandwidth for content to load.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='https://blogeutectics.googlecode.com/svn/trunk/prism-eutectics.js'/>
</b:if>

Now you can download any CSS style from this download page.
Add your code snippets as shown below.

<pre><code class="language-markup">

</code>
</pre>

Change “markup” to “css” or “javascript” if required.

More from Author :

If you are using my prism JavaScript code to install prism them I have included some JavaScript in that script which is quite helpful for your readers. What does this JavaScript do is that it selects the complete code whenever the code snippet that has been highlighted is double clicked. This helps them to copy the complete code very easily. And what does this CSS do that it includes that notification over your code snippets to “Double click” the code to copy. For information check the below image.

If you want add this code manually if you not using my prism code then add this CSS code before ]]></b:skin>

pre{overflow: auto;
padding: 10px;
color: #000;
background: #FCFCFC;
font: 12px/1.5 Monaco,"Courier New",Courier,monospace !important;
white-space: pre-wrap;
width: 90%;
margin: 10px auto;
border-left: 3px solid #6CE083;
padding-left: 13px;}
pre {
    position: relative;
}
pre::after {
content: 'Double click';
padding: 2px 5px;
width: auto;
height: auto;
font-family: monospace;
position: absolute;
right: 8px;
top: 8px;
color: #FFFFFF;
background-color: #A5A5A5;
transition: all 0.3s ease-in-out;
}

pre:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}

And add this below script above </body>

<script type='text/javascript'>
//<![CDATA[
for(var pres=document.getElementsByTagName("pre"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var a=getSelection(),b=document.createRange();b.selectNodeContents(this);a.removeAllRanges();a.addRange(b)},!1);
//]]>
</script>