Add Code to Your Blog

Well, have you ever put code samples in your blog? If you have did that, but without using any code syntax highlighter, it will certainly look like a mess. Don’t agree? See this. This is a code fraction for java. It doesn’t have any of those text-formatting, just typed using only the normal Blogger fonts.

/**
* This application simply prints hello world in the screen
*/
class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello World!"); // Display the text
}
}


What do you say? Is it readable or look pretty? Not at all! This kind of code samples will certainly drive your readers out of the site. Even we wrap the code with the HTML 'code' tag, it won't look much better. Therefore you should use a code highlighter. I was searching for that stuff and finally one of my friends tell me about a syntax highlighter. And later I found another technique. So I thought I will share it with you.


Remember these techniques are available for most of the popular blogging tools. But I’ll tell you how to do that with Blogger. And I have found two ways (there may be other ways also) as I told you. I will start explaining the easier one first.


Method 1

It’s really simple. And you have to do only few copy paste stuff. First visit http://gist.github.com/. Then you will see the following web page. What you just have to do is,

1. Paste the code in the text box, and then select the appropriate language. Then click “Create Public Gist” and copy the embed code. Work at the gist site is over.
2. Go back to Blogger and go to the post (Edit Posts) and Select “Edit Html” from the two tabs. Just pastes the copied embed code. Done!

This is an example of the previous code using Gist.



This method is easy and it doesn’t need any setup or configuration at the blogger. Also it supports number of languages. But there is small problem. That’s we are just embedding the code and if the gist site is down or unreachable at the moment the code syntax will not displayed as it should. Therefore I prefer the second method.



Method 2

My second method (and the one I’m currently using) is SyntaxHighlighter. It is a full set of syntax highlighters created (by Alex Gorbatchev) using JavaScript, therefore it will work independently of the browser and the platform. It’s better than the previous one because it allows customizing the appearance of the code but we have to do small configuration before using it. So, let’s jump to the steps.

First you need to download the JavaScript files (the latest version currently available is 3.0.83) and you need to host those files before using them. But If you don’t have a hosting space, you can use the free hosted version. But with using free hosted version you will also have the same old problem as in the previous method, that is, depending on the SyntaxHighlighter server. Anyway, following instructions are made using the free hosted version.

Then goto the Bloggger > Dashboard > Design > Edit HTML and then copy and paste the following code just before </html> tag

<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">

Then, next to the above code (and still before the </html> tag) You have to specify the languages you are using. just copy and paste the following after the previous code block.

I have just only put C#, Java and C++ here. But you can use any of the brushes available at here. Only thing you must do is call those brushes using the same code line with only changing the name of the brush. For an example, to call the PHP brush, what you need to do is copy any of the line 1, line 2 or 3 and change its name to ‘shBrushPhp.js’ instead of the existing name (ex: shBrushJava.js)

Last part (line 9 to line 13), you must add it to invoke the JavaScript (SyntaxHighlighter)

Now the necessary configurations are done. When creating a post add your code between the <pre> and </pre> tags. Here you have to remember two things.

1. Your code must be typed in escaped HTML. (use this for covert your code to escaped HTML)
2. You must define the language of the code using the parameters of <pre> tag (eg: <pre class="brush: java"> for java)

Type the code in the blog post like this;

<pre class="brush:java">
/**
* This application simply prints hello world in the screen
*/
class HelloWorld {
   public static void main(String[] args) {
      System.out.println("Hello World!"); // Display the text
   }
}
</pre>

Above one is the code for inserting our initial Java 'HelloWorld' code. Out put of that one look like this.

/**
* This application simply prints hello world in the screen
*/
class HelloWorld {
   public static void main(String[] args) {
      System.out.println("Hello World!"); // Display the text
   }
}

Unlikely in our previous method, we can change the template of this code snippets. See for yourself by just changing the "styles/Name_of_the_theme" to one of these. (Change only the file name of the theme)

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css">

Note: This is the second line of the first code block under the Method 2.

Now you can use this clear and beautiful Syntax Highlighter to present code samples in your blog.