Make Code Snippets Look Awesome With Google Code Prettify Syntax Highlighter

Everyone wants their blog/website to look unique as well as stylish. Even while displaying code snippets also you would prefer to stay different which matches to your site theme and look elegant. Lots of methods are there to avail and one of them is Google Code Prettify which make your code look more pretty, easy to use and install.


Image Credits : Karolo

Some Features Of GCP :

  • ◾Works on HTML pages.
  • ◾Works even if code contains embedded links, line numbers, etc..
  • ◾Simple API.
  • ◾Does not block page from loading while running.
  • ◾Customizable styles.
  • ◾Supports all C-like, Bash-like, and XML-like languages. No need to specify the language
  • ◾Extensible language handlers for other languages. You can specify the language.
  • ◾Widely used with good cross-browser support. Powers and

Adding Google Code Prettify To Blogger :

Before doing anything Backup your Template first.

1) Go to blogger template by clicking on Template and then on Edit HTML


Now search (Ctrl+F) for </head> tag in the template and copy the below code and paste it above </head> tag.

<!-- Prettify SheToldMe--> 
<link href='' 
rel='stylesheet' type='text/css'/>
<script src='' 

2) Again search for <body> tag and replace it with below line of code

<body onload='prettyPrint()'>

3) That's it. Now whenever you want to add some code in your post, switch to Edit HTML mode, rather than Compose, and add


<pre class="prettyprint">

means you need put your code in pre tag and use the prettyprint class

Note : * Do not forget to Encode your code here to convert your raw HTML into escaped characters.

You can even tell the pretty print about the language you are using e.g.

<pre class="prettyprint lang-java">

A list of all the supported languages and how it works can be found in their READ ME File

Customizing Google Code Prettify To Look More Pretty :

If you are not happy with the default style or theme then don't worry, you can get more themes to choose from the below Gallery.


By default you will be using this prettify style only.

Google-Code-Prettify-Theme-Desert Google-Code-Prettify-Theme-Sunburst Google-Code-Prettify-Theme-Sons-Of-Obsidian Google-Code-Prettify-Theme-Doxy

Click on the style which suit your need and use them by Hosting at your own server.

Must Read >> Host Your External Files In Drop box For Free.

We Still got more themes to choose. Thanks to JMBlog for providing below styles. Click on the style which fits your need and download them.

Google-Code-Prettify-Theme-Vibrant-Ink-From-JMBlog Google-Code-Prettify-Theme-Git-Hub-From-JMBlog Google-Code-Prettify-Theme-Tomorrow-Night-From-JMBlog Google-Code-Prettify-Theme-Tomorrow-From-JMBlog Google-Code-Prettify-Theme-Tomorrow-Night-Eighties-From-JMBlog Google-Code-Prettify-Theme-Tomorrow-Night-Blue-From-JMBlog Google-Code-Prettify-Theme-Tomorrow-Night-Bright-From-JMBlog Google-Code-Prettify-Theme-Hemisu-Dark-From-JMBlog Google-Code-Prettify-Theme-Hemisu-Light-From-JMBlog

After downloading and hosting the CSS file at your server. Replace the default style which we used at the starting of the post with your new style as shown in below code.

<link href='YOUR UPLOADED CSS URL' rel='stylesheet' type='text/css'/>

*Replace 'YOUR UPLOADED CSS URL' with your hosted URL.

Final Words :
Hope this article is simple and clear to understand, let me know if I'm unclear or missing any points. Getting Started section is there if you want to explore more. Do tell us which Syntax Highlighter you are familiar or presently using. If you implemented this successfully using this tutorial in your site/blog then thank us by dropping your comments.

Next Post »