How to install Prettify Syntax Highlighter Plugin on Blogger?

Today, we have an interesting topic to discuss. The scene is - "You have a Blogger blog and you share code snippets, programming tutorials or simply Blogger Tutorials just like this one"". In this regard, let me reiterate that "Content is king" and readers are always in a hunt for awesome articles but the one that really converts them into returning visitors or more specifically, active followers, are the one's which is presented in a professional way or more precisely, in a readable format.


Apart from an elegant, clean & professional template, you must also stress on the post formatting in a way that appeals all the readers. In this article, we will be guiding you on How to use prettify with blogger/blogspot to publish code snippet using <code> or <pre> tag in Blogger.

So, what is Prettify?

Well, Prettify is a combo of a Javascript module and the CSS that can be used as syntax highlighter for code snippets in any HTML page (which in our case is on Blogger).

If you want to see a demo of how it looks like, you may preview it on this blog itself which is used on article pages such as the Blogger Print CSS tutorial or preview it with a small example below.

CSS:

body {
background: #eee;
font-family: Georgia;
}
#wrapper {
width: 100%;  /* reset width of the main wrapper */
margin: 0 auto;
}

How to install Google Code Prettify Plugin on Blogger?

Before installing the plugin, we insist that you note down few facts about Prettify to understand how it works. This syntax highlighter plugin consist of a JS file, CSS (or Prettify theme) & extensible language handlers. While Prettify can work without specifying the language with C-like, Bash-like, and XML-like languages, other languages are supported through extensible language handlers.

Some of the extensible language handlers are CSS, SQL, Visual Basic etc.

Now, let's get back to the point. In order to install Prettify on Blogger/Blogspot, first of all paste the following JS file just above </head> tag.

<script src='https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js'/>

You can then go to this Google Code page and choose one Prettify theme to use with Blogger. You can accordingly add the CSS files of any desired theme by pasting it above </b:skin> tag.

We have been using a modified version of Sunburst theme in this blog with improved line numbers and better alignment. The CSS code is shared below:-

pre.prettyprint { display: block; background-color: #111;white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap; }
pre .nocode { background-color: none; color: #000 }
pre .str { color: #ffa0a0 } 
pre .kwd { color: #f0e68c; font-weight: bold }
pre .com { color: #87ceeb }
pre .typ { color: #98fb98 } 
pre .lit { color: #cd5c5c } 
pre .pun { color: #fff }    
pre .pln { color: #fff }    
pre .tag { color: #f0e68c; font-weight: bold } 
pre .atn { color: #bdb76b; font-weight: bold } 
pre .atv { white-space: normal;color: #ffa0a0 } 
pre .dec { color: #98fb98 } 
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } 
li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9 {list-style-type: decimal!important;}
li.L1,li.L3,li.L5,li.L7,li.L9 {background: none!important;}

@media print {
  pre.prettyprint { background-color: none }
  pre .str, code .str { display:block;color: #060 }
  pre .kwd, code .kwd { display:block;color: #006; font-weight: bold }
  pre .com, code .com { display:block;color: #600; font-style: italic }
  pre .typ, code .typ { display:block;color: #404; font-weight: bold }
  pre .lit, code .lit { display:block;color: #044 }
  pre .pun, code .pun { display:block;color: #440 }
  pre .pln, code .pln { display:block;color: #000 }
  pre .tag, code .tag { display:block;color: #006; font-weight: bold }
  pre .atn, code .atn { display:block;color: #404 }
  pre .atv, code .atv { white-space: normal;display:block;color: #060 }
}

Save the template and you are good to go.

Usage

Using Prettify Plugin in Blogger is easy. You just need to add the Prettify class while using it with <code> or <pre> tag as shown below:-

<pre class="prettyprint">
// Your code snippets here...
</pre>

To enable line numbers, you may use the following pattern:-

<pre class="prettyprint linenums">
// Your code snippets here...
</pre>

To add an extensible language handlers like CSS, add ?lang=css on the main JS files.

<script src='https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css'/>

For using extensible language handlers like CSS, you need to specify the language.

<pre class="prettyprint linenums lang-css">
// Your CSS codes here...
</pre>

That's all for today. Hope this tutorial has guided you well for successfully installing Prettify Plugin on Blogger. Do write back if you have any query or otherwise leave your feedback below.