Code/Syntax Highlight in Blog

Its always a good practice to write a well formed and well managed source code but after putting much effort to write a nice and clean piece of code we often come into a situation that when we post it on Blogs or on Web pages it doesn't look as nice as it should look.

Have a look at below java code:

public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello World!"); // Display the string.
}
}

I really don't like that my code looks like this and I am sure you also don't like it. but what if the same code looks like below:

public class HelloWorld {

    public static void main(String[] args) {

        System.out.println("Hello World!");  // Display the string.

    }

}

This looks very neat and clean, right?


SyntaxHighlighter by Alex Gorbatchev is the most popular and easy to use Java script API to highlight you source code.

Just to steps to add SyntaxHighlighter to your Blog on Blogger.com

Step 1: Adding SyntaxHighlighter resource files to blog

1. Go to Blogger Dashboard > Design > Edit HTML.
2. Press CTRL+F to find the code
3. Copy the below code

<!--SYNTAX HIGHLIGHTER BEGINS-->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.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/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 = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>
<!--SYNTAX HIGHLIGHTER ENDS-->

4. Paste it on top of </head>. (We are adding all resource files to HEAD section of the template)
5. Preview your template and save it if everything works ok.

Step 2: Posting code to Blog

Before posting your code to the blog its advisable to convert raw HTML characters to escape characters. There are some online utilities available for performing this like:
1. Encode / Decode HTML Entities
2. Postable

When writing a new post, you need to use <pre> tag in the post. The code of your post needs to go in between <pre class='brush:java'> and </pre> tags, in order to highlight your code properly.
Just like below:

<pre class='brush:java;'>

    public class HelloWorld {

        public static void main(String[] args) {

            System.out.println("Hello World!");  // Display the string.

        }

    }
</pre>

Which will look like this at end

public class HelloWorld {

    public static void main(String[] args) {

        System.out.println("Hello World!");  // Display the string.

    }

}

This is it. You are done with basic setup. In addition you can also customize SyntaxHighlighter with different themes or brushes.

Themes for SyntaxHighlighter

SyntaxHighlighter is available with some well known color themes. You can select a theme which match with your Template. You can apply a theme by selecting CSS file for it. Click name of the theme to get preview of the theme.

Name	File
Default	<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
Django	<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDjango.css' rel='stylesheet' type='text/css'/>
Eclipse	<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'/>
Emacs	<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css' rel='stylesheet' type='text/css'/>
Fade To Grey	<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeFadeToGrey.css' rel='stylesheet' type='text/css'/>
Midnight	<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeMidnight.css' rel='stylesheet' type='text/css'/>
RDark	<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>

You can apply new theme by replacing default theme CSS with the CSS file of your choice from above list. Replace the selected line no 3 in above SyntaxHighlighter resource code which we entered in Template by new CSS file.

Brushes for SyntaxHighlighter
You can also select support of different languages by selecting or removing various brushes. This gives you flexibility to select necessary brushes only thus you can also save loading time of your page. Selected line no 5 and 8 shows brushes for CSS and SQL respectively.

A list of all available brushes is available here.

Issues with SyntaxHighlighter
If you find any issues with SyntaxHighlighter you can post them here.

Happy Blogging. :)