Monday, 12 January 2009

Syntax Highlighting in Blogger

After struggling a while I am ready to publish a post about syntax highlighting on Blogger.
There are many topics of how to 'install' syntax highlighting on Blogger. I will not repeat that. Just search for syntaxhighlighter or go to syntax highlighter.
In brief, take the following steps:

  1. Copy the necessary javascript files to your script directory on your website. You need at least the following files:
    1. shCore.js file
    2. clipboard.swf
    3. shBrush**.js (where the ** should be e.g. Vb or CSharp)
  2. Place references on your theme to these files (in blogger, go to Layout/edit HTML)
  3. In many cases, using the SyntaxHighlighter.css file (place also the reference in your theme) will be suitable. Unfortunately, for my theme (which I downloaded for free from http://www.ourblogtemplates.com/), it doesn't work that well. For each line of code, the gray bar was to wide, as well as that the code lines didn't align well with the top bar of the code piece.
    After searching a lot, I found the solution:
  4. Instead of using the syntax highlight style from the css file (see step 3), copy the entire content of this file, and paste it into the style section of your theme. Delete the reference to the css file (you don't need it anymore), and voila, job done!
Now you are able to put your code in on your blog with syntax highlighting. I prefer using the pre-tag.
If you still got questions, don't hesitate, just ask them.

2 comments:

Frank said...

This is a real nice highlighter. I used an online highlighter named Iris, but this one is not available anymore.

This is a great alternative!

Robje said...

Hi Frank,
Yes, it's a great and nice one. I only see that you are using the new version (2.0), I am still using the previous version (1.5.1).
Soon I'll try to move to this new version (shouldn't be that hard I assume)