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.

Google+Code+Prettify

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 code.google.com and stackoverflow.com

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

Blogger+Template


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='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' 
rel='stylesheet' type='text/css'/>
<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' 
type='text/javascript'/>

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

HTML-Mode


<pre class="prettyprint">
// YOUR CODE HERE
</pre>

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">
// YOUR CODE HERE
</pre>

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.


Google-Code-Prettify-Theme-Default

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.


Previous
Next Post »