Displaying code on your website

-

Soon after creating my blog I found myself in a dilemma. I wanted to show code to readers without compromising readability, yet none of the built-in HTML tags seemed to do the trick.

Initially the pre tag seems enticing, but a developer soon realizes that every less than or greater than sign would need to be manually escaped if using the pre tag alone. code, in addition to not preserving line breaks, also does not automatically escape characters - for good reason. But as a matter of convenience I wanted to make it easier on myself.

Yes, my solution relies on Javascript. No, not everyone has Javascript enabled. And yes, this means that your site will not display code properly for a small minority of your visitors.

So I had 3 goals in mind for my script:

  1. wrap lines rather than spilling over
  2. automatically escape tags within a pre tag
  3. syntax highlighting and line numbering (i.e., pretty-print)

These are all necessary for block code - for inline code I simply use the code tag.

1) Line wrapping

While I was already adjusting the pre tag with CSS, I wanted to have the tag wrap lines as well.

code {
    background-color: #eee;
    padding: .3%;
}

pre {
    background-color: #eee;
    padding: 1%;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

The code tag is simply given some padding and a light grey background.

pre is given a background and padding as well, but in addition there are 5 attributes set to wrap lines; this is for browser compatibility.

2) Automatically escape tags

I use jQuery to escape characters.

This cannot be the default for compatibility reasons; I add the class autoescape when I'm feeling lazy.

Here's our function that automatically escapes.

function renderCode(){
$(".autoescape").each(function(){
	$(this).text($(this).html().replace(/&gt;/g, ">").replace(/&lt;/g, "<"));
});
}

We use regex to replace any greater than or less than signs that were already escaped. This is necessary since we still need to manually escape server side code - it will run before Javascript has a chance to stop it.

3) Syntax highlighting and line numbering

I really grouped these two together because I use the same Javascript library to achieve both: Prettify.

I downloaded the script and CSS file and included them in my header.



I do this because I want to call prettyprint after the page has loaded; I use the HTML DOM to inject the prettyprint class onto all of my pre tags, along with the linenums class.

In our renderCode function I add one line:

function renderCode(){
$("pre").addClass("prettyprint linenums");
$(".autoescape").each(function(){
	$(this).text($(this).html().replace(/>/g, ">").replace(/</g, "<"));
});
}

I found that the prettify.css file automatically only shows every 5th number. I removed the following line to show all line numbering.

li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}

So your Javascript and CSS is now set. At the end of your code, you just need to call the renderCode and prettyPrint functions. You could also call these functions using the onload attribute of your body tag.

Conclusion

There are disadvantages to using this code.

You can't show code that demonstrates escaping HTML special characters very well. You might have to reshape your code so it can be displayed without quotes within quotes. Of course, you could always just not use the autoescape class.

Even if you are autoescaping, you still need to manually escape the less than and greater than signs for server side code and the body tag. And your code needs to be properly nested.

And of course, if your user has Javascript disabled, it may distort your site on their browser. But the convenience of being able to display code so it looks nice definitely outweighs the loss of compatibility for me.

A working model is available on JSFiddle for you to play around with. Let me know if you found this helpful!

Tags: jquery pretty-print pre tag code tag

See also: Evaluating a string as a mathematical expression in JavaScript

Back to all posts

Neel Somani

About the Author

Neel Somani, a student at the University of California, Berkeley, is the founder of Apptic LLC. In addition to computer science, he's interested in philosophy and entrepreneurship. You can follow him on LinkedIn and Twitter.

comments powered by Disqus