Highlight Code using jQuery and Chili

If you're maintaining a blog and want a way to highlight code within your articles (for ease of reading), then this article may interest you.

I can't even begin to say how annoying it is to read a large chunk of code that has no color highlighting - this will improve readability and traffic to your blog (or whatever you decide to use it on).

The first thing you'll need to do it download the latest Chili (jquery plugin) source from http://code.google.com/p/jquery-chili-js/downloads/list.

I'm going to assume you're following an MVC (Model View Controller) framework, so if you copy the chili directory within your js (javascript) directory that will be fine - otherwise, copy it where ever else you'd like, but you'd have to change the paths accordingly.

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/chili/jquery.chili-2.2.js"></script>
<script type="text/javascript">
    ChiliBook.recipeFolder = "/js/chili/";
    //ChiliBook.lineNumbers = true;
</script>

As above, you'll have to include the main jquery library (assuming you have this already), and then include the chili plugin. For the last main step, you'll have to tell Chili where the recipes are (the language files).

I have also added a commented out option, which will add numbers to your code, which you can enable if you choose to.

<pre>
<code class="php">
(code goes here)
</code>
</pre>

And finally, you can see how easy it is to highlight the code - for this example I used PHP, but you have quite a lot of options. You can check all of them by taking a look in the Chili directory.

If that doesn't work for you, and you need something to parse code on the server side, you should check out GeSHi.