If you are writing technical blogs, it is apparent you would need to post some source code of some language at sometime or the other. Posting code with no syntax coloring works fine but coloring makes code goes easy on eyes and to understand it faster.

The tool of choice I prefer for blogging is Syntax Highlighter. It is completely client side so server won’t be burden with extra work of syntax highlighting the code and it looks pretty on page.

Many blogging engines provides their own set of tags which enables to do syntax highlighting. If you are hosting a blog in Wordress.com you can use the the sourcecode tag.

If you are hosting your own blog using Wordpress engine, you are not luck as it doesn’t support sourcecode tag. Not to worry, there are some great options to highlight your code. Out of many available options, I prefer Syntax Highlighter Plus wordpress plugin. It works out of the box and you can just paste the complete code as is without worry about converting the < and > characters.

However one issue I had with it was the width of the code window it renders. By default it uses around 530 pixes, which may be little small if you have wide width blog layout as mine. Solution is pretty simple. After installing the plugin, open

wp-content/plugins/syntaxhighlighter-plus/shlfiles/SyntaxHighlighter.css
</pre> and edit the 
<pre>.dp-highlighter

class with desired code width. The code window used in this site uses 750px.

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