Adding syntax highlighting to code snippets in Blogger

As I am starting to write tech blogs, I will be adding lots of code snippets to my blogs. While it's trivial to add code-snippets via plugins in paid blogging platforms, unfortunately free versions of Blogger or WordPress doesn't allow any code-editing plugins.
After doing some research I found out that, even though Blogger doesn't come with plugins like gist embedder or syntax highlighter, thankfully we can add them by loading custom JavaScript files.

Below are couple of ways to add them and gotchas:

1. Adding Gist embedding plugin (gistLoader):
Follow instructions http://blog.moski.me/2012/01/gist-with-bloggers-dynamic-views.html
Gotcha #1: 
For whatever reason, it never worked while using one of the "dynamic views" templates. But when I switched to "Simple" template (this one), it worked like a charm.

Gotcha #2: 
Some of the templates don't have JQuery. So Make sure to add JQuery before gistLoader.

Loading ....

2. Adding Syntax Highlighter plugin:
 Follow this great blog post http://oneqonea.blogspot.com/2012/04/how-do-i-add-syntax-highlighting-to-my.html

 Gotcha #1: Again this never worked while using one of the "dynamic views" templates. But when I switched to "Simple" template (this one), it worked like a charm.

3. Adding Google Prettify plugin:
Follow this blog http://www.milesdennis.com/2010/02/adding-googles-code-prettify-in-blogger.html & there are many other blogs that shows how to add Google code prettify plugin.

This should be in color but something is wrong :) 


... code ...