Highlight your source code with jQuery and Chili

In this first tutorial we highlight source code with the jQuery plugin Chili. We go further and tweak Chili to our liking and increase the readability and usability of code-boxes with our own custom functions. Demo Source

Introduction

In this first tutorial you will see how to highlight source code with the help of the jQuery Plugin Chili. Since this is not just another Chili Quick Start Guide we go further and tweak Chili to our liking (add one line of code) and implement our own functions to increase the readability and usability of source code.

Our starting point

The xHTML

We use this really simple layout with a content area and a sidebar. Nothing fancy. The site has two code-boxes, one with a horizontal scrollbar and one without. Here is the complete markup:

All very generic. We keep our eyes on the code-boxes:

Beside including jQuery, Chili and our script in the header these are the only places where we must edit the source code.

The CSS

The Stylesheet is also very generic, nothing too special about it. The relevant bits for this tutorial have been marked.

I recommend you to read the article Styling Code Snippets with CSS to find out how to style (not highlight) your code-boxes.

The little helpers

here are two additional Stylesheets included, these are little helpers just to speed things up. In future Demo’s I will use these two helpful Stylesheets over and over but I will not mention it every time. Just for your info.

We have reset.css which is (as the name says it) a CSS Reset. I like to use Eric Meyer’s.

960.css is a Grid System. It help’s styling the layout within a minute and provides commonly used dimensions.

Download, include and activate Chili

Our example page is set-up, it’s time to bring some Chili in! First go ahead and download the latest version. In this tutorial we use the version 2.2.

Once extracted we copy the files jquery.chili-2.2.js, recipes.js and all languages (recipes) we need. In our example we only use JavaScript and CSS, so we need js.js and css.js. The file structure of the example now looks like that:

Next we have to include jQuery, Chili and the Recipes in our header:

Now we activate Chili, this can be done by setting specific class attributes on the pre and code tags.

The class ln-124 tells Chili to start the ordered list (line numbers) at 124. Use ln- to start at line 1. The class js tells Chili which language we want to highlight.

That’s almost it. One small last thing is to bring back numbers to ordered lists, because the reset.css set list-style to none. We do this with one tiny line in our main.css:

And there we have it! Highlighted code with a few simple steps and we haven’t written a single line of JavaScript yet. Now to the fun part of this article. :)

Tweaking Chili to our liking

As you can see, Chili is great. Painless integration and it works instantly. The only feature I don’t like is the selection helper. It is a good idea but the implemention isn’t that good.

So we tweak the source of Chili a little bit so this selection helper doesn’t show up when a user selects source code. We replace this feature later on with our own functions.

The selection helper function is located at line 504 in the file jquery.chili-2.2.js:

To disable this function we simple return to the caller before doing anything:

That’s it, the Chili selection helper is disabled and ready to get replaced with our custom jQuery functions.

Increase readability for long code lines

In our example the second code-box has a horizontal scrollbar because the code-box width is not enough for the content. We want to accomplish that the code-box increases it’s width when the user moves the mouser over. When the mouse move out again the code-box are reset to the original width. And we do this with style, a small animation… hey we are using jQuery. ;)

Befor we go any further make sure that we include our script in the header before Chili. With that we make sure that our script is working with the original DOM, Chili will modify it afterwards.

The problem

How do we determine if a code-box has a horizontal scrollbar? Of course the first thing that come to mind is to get the width() of the <code> block. If that width is greater than the <pre> it must have a scrollbar. Good thinking, but it does not work because we cannot read the correct width of the code block. Here is a quick example and the output:

The output will show that the width of the code block is even less than the pre block because of the margin-left.

Also no luck reading the innerWidth() or use the plugin Dimensions.

The solution

The secret to determine if a pre block has a horizontal scrollbar is not the width but the height of the pre and code block! Let’s try out this example:

Here is the output of that quick example:

And the output shows us that the second code-box, the one with the scrollbar, has different heights! The extra height of the pre block is the scrollbar itself. So there we have it, our condition: if the <pre> height is greater than the <code> height expand the code-box.

The code

Now let’s break this little script in parts that are interesting.

First of all we store the initial width of code-boxes so we don’t have any static value to handle. The advantage is that we can redesign our page, change the width of code-boxes, without touching this script again.

Here we calculate how much space we have to expand the code-box to the right.

We only start the animation if we are still at the starting point of the initial width. If we are in the animation we don’t start it again.

And that’s it, the code-boxes now expand if needed on mouse over. One little snag is that this function does not work in IE because the scrollbars does not produce extra height. But I think people interested in source-code, whatsoever, does not activly browse the web with IE. And if so they have to scroll manually, your site will not break.

Increase usability with a Plain Text option

Since we disabled the selection helper of Chili it is hard for the user to select and copy our source code. In some browsers it works, but in some the line numbers are copied too. Short, it’s a mess and we need a function to allow a more friendly way.

We want to have a textarea containing the source code that appears when requested, indeed switching with the code-box. That’s realized with the following code:

Let’s split that code block into the interesting parts again.

Here we loop through all pre’s (code-boxes). Before the pre block we write a link, with that the user is able to toggle between code-box and textarea. We bind a click to it in the next piece of code. After the pre block we write the actual textarea with the source code inside of it. We calculate the rows attribute of the textarea by counting the line breaks in the source code (\n).

With this toggle interaction helper we switch between the code-box and the textarea. We travel from the link postition, the first next() is representing the code-box and the second next() represents the textarea. If the code-box is visible we hide it and show the textarea, and vice versa. Also we change the text of the link each time, so the user have a clue what happens when he click on the link.

Of course we can and should style the textarea with CSS:

Textarea’s are now hidden by default and have the same width, line-height and margin like the code-boxes.

Conclusion

Nice! A few simple steps to have our own readable and accessible code-box with the help of Chili and some custom jQuery code. Feel free to tell us your improvements in the comments. Also questions are welcome if there are any. Thanks for reading the first tutorial of This Blog use jQuery!