As told in my previous micro blog post, I was looking for an easy way to format the code that I was putting on my site based on drupal. I wanted it to be quick and easy to integrate with Drupal. And yes, I wanted something which would work on the client side and not on the server side. So, no PHP code or things like that.

I found this project http://alexgorbatchev.com/SyntaxHighlighter/ and this integrated quite easily with drupal. Although you will find the documentation on how to implement this on your site, but this one tells you how to implement in drupal ?

Files that you will need:

Download the current version of project from the site, but make a note – you don’t need all the files from the project for your drupal installation.

This is the folder structure for my theme in drupal 7:

I have a scripts folder, where I keep all my javascript files (this is where the project js files will go), a css folder where as the name suggest are all my css files. And the last thing is the important .inof file where I need to add the files.

Highlighted are the files that I have added. Make a note of the last file in the list: shBrushPhp.js. YES, I liked the idea. Separate js files for separate code formatting. So, not necessary to load the script which I won’t be using. You can get a list of the files available and which one to use for a particular type of scripting language. And believe me this project supports a huge list J

http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

These steps take care of almost all the things that you need to do for the code syntax highlight to work.

Now, whenever I want to place any code inside my tutorial I just start a tag with a tag class=”brush: php”. For example a code inside my content: