Syntax Highlighting for Blogs

Code snippets inside blog posts can be very difficult to read if they are written using normal font.

Consider the following piece of code.

int i, sum=0;
for(i=0; i<n; i++)
{
sum = sum + i;
}
Code without any special formatting.


HTML <pre>...</pre> and <code>...</code> can be used to preserve the white spaces and long lines.
Here's the same code put inside a <pre><code> block..

int i, sum=0;
for(i=0; i<n; i++)
{
    sum = sum + i;
}

Structure of the code preserved using <pre> & <code>

This version looks much better than the first one. The monospaced text makes it easier to read.

However, this is not enough. These generic <pre>&<code> do not highlight the keywords in the code snippet. This is where Syntax Highlighting comes into picture.

Syntax highlighting is a feature of some text editors that display text—especially source code—in different colors and fonts according to the category of terms. This feature eases writing in a structured language such as a programming language or a markup languageas both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it's made only for human readers/editors. (Read more on Wiki..)

Let us apply Syntax Highlighting to the above code.

int i, sum=0;
for(i=0; i<n; i++)
{
    sum = sum + i;
}

Now, this looks much better! This is achieved using a third party Syntax Highlighter plugin.
There are many plugins and other tools available on the internet for Syntax Highlighting.

I am using SyntaxHighlighter for this blog. I chose this because it's easy to use and supports many languages. Will talk about plugin integration with blogger in my next post.


Cheers,
Sandeepa Nadahalli