Highlighting source code in Blogger post

You might want to hightlight the source code in your post as below:

public void formatCode() {
   System.out.println("Hello World!");
}

We can do it using SyntaxHightlight javascript framework as following:

Note that If your blog is using Dynamic template, it does not work. It works with only Simple template. Blogger also allows you to switch template but make sure you backup the current template first.


1. Open your blog's template page

2. Click the Edit  HTML button to edit the template

3. Copy the following code and paste it above the </head> tag and then save the template

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css"></link>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

Note that you can exclude some JS libs, for example shBrushVb.js, if you're not gonna use it so that you won't hurt the performance of the blog.

I had a problem with blogger that when my page was loading, it tried to download the javascript and css files using https protocol instead of http, in which the site does not support that so i downloaded those files and uploaded them to Dropbox and replace the domain alexgorbatchev.com with the dropbox domain.

4. Create a new post and click on HTML button and copy the code below and paste it there

<pre class="brush:java">
public void formatCode() {
   System.out.println("Hello World!");
}
</pre>

If it's XML code, you can use <pre class="brush:xml"> instead and you need to escape the html characters (for example, < or > ) first. You may use any online tools to do it such as http://www.bloggersentral.com/p/html-escape-tool.html


5. Now it will take effect for all new and existing posts but you can see the syntax hightlight for only the published posts and only when you're viewing them, not editing or previewing. As the owner, you can view the post from the following page:

Reference:
http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.html