Monday, January 16, 2012

Putting code block in blogger posts - SyntaxHighlighter

Code block is important for writing technical blogs.

Since blogger doesn't have a default code block, I was trying to find a good way to put a code block for my posts.

I was first thinking to use the HTML5 <code></code> blocks and format them but I found the SyntaxHighlighter when I searched around. It is a self-contained javascript library for putting a nice formatted code blocks in webpages.

Here is how to do it in blogger:

1. Download or use the hosted version of SyntaxHighliger - I am using the hosted version since I don't want to host the files.

2. Go to the Templates setting in blogger and edit the template HTML. Right before the </head>, add:

  
  
  

3. The SyntaxHighligher comes with different kinds of brushes for different languages. Each brush type represent one type of programming lauguage block. I added the brushes using autoloader so that the page will only load the require script for the page instead of loading everything. When using the library in blogger, also need to set the bloggerMode as true. Following codes are added in the bottom of the template html (for my template, right below </macro:includable>):


4. Save Template. Now it is ready to use.

5. Start/Edit a post and switch to the HTML editor. To put a javascript code snipped:

function test() {
  //test
}

It will show up in the blog as:
function test() {
  //test
}

A list of brushes can be found here.

4 comments:

  1. In near future, big data handling and processing is going to the future of IT industry. Thus taking Hadoop Training in Chennai | Big Data Training in Chennai will prove beneficial for talented professionals.

    ReplyDelete
  2. Nice blog & thanks for the share.

    Checkout http://skartecedu.in for the best digital marketing training in Chennai.

    ReplyDelete