'The research literature is unequivocal: most hard-core substance abusers come from abusive homes.' -Gabor Mate, In the Realm of Hungry Ghosts

How to Display Code on Your Website

by Ethan Glover, Sat, Oct 25, 2014 - (Edited) Sat, Oct 25, 2014

There are a lot of solutions to display code on your site out there. HTML, LaTeX and other libraries. In the past, I’ve uploaded code to Gist and embedded that here. I’ve also used Pastebin.com. However, I don’t like the idea of having to upload to separate sites just to embed that here on this site. I’d like to cut out that extra step. The problem then is finding good syntax highlighting, plain HTML does no highlighting at all, things look kind of ugly like this example with insertion sort:

public static void insertion(int[] A) {
int i, j, key;
for(j = 1; j < A.length; j++) { key = A[j]; // If previous is greater than selected (key) swap 
	for(i = j - 1; (i >= 0) && (A[i] > key); i--) {
		A[i+1] = A[i];
	}
	A[i+1] = key;
	}
}

With lots of code, this can be kind of hard to read. This may be good for short snippets of code but again it doesn’t do much as far as syntax highlighting goes.

The Solution

That brings us to what I use and apparently what StackOverflow uses too. Google Prettify. Google’s libraries are as always reliable and fast. Using it is very easy too. Start by including this simple one line of code in the head section of your website:

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

From there just wrap the code you want to use in a “prettyprint” class like this:

<pre><code class="prettyprint lang-java">
[code goes here]
</code></pre>

Note that you can specify the language you are using but if you don’t want to do that simply leave out the “lang-java”, and it will go to the default.

Also because we're using the <pre> tag make sure to align all your code properly. You'll notice in the source code of this page that all code is put to the left as far as possible. If you don't do this everything will be tabbed over creating extra white space to the left of your code block.

From there you’ll have to make a couple of changes to your CSS code. On my post on sorting algorithms you'll notice that with large blocks of code you can scroll left and right. Without fixes to your CSS this won’t happen and you’ll end up with lines of code going off the page if they’re too long. To fix this I used the following elements in my CSS stylesheet:

code {
  background-color: #FFFFFF;
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
}

pre, #mathjax {
  background-color: #FFFFFF;
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
  margin-bottom: 10px;
  max-height: 600px;
  overflow: auto;
  padding: 5px;
  width: auto;
}

This is also what StackOverflow uses with the exception that I’ve chosen white as a background as opposed to a #EEEEEE grey and I’ve added a MathJax ID to help with wide tables.

Two Tips

One thing that I’ve noticed is that Prettify can be kind of annoying with the first line. Normally I would do the <pre><code… first, press return/enter and put the code on the next line. But doing this creates an extra space like this.

print “I’m down here!”

If you put your first line of code on the same line as the <pre><code… line it will fix the problem.

print “Hi there!”

Another thing is that Prettify has a bit of a weakness with HTML. If you put straight HTML in that prettify class if will render the code. For example doing <pre><code class="prettyprint lang-html"><strong>I’m not supposed to be bold.</strong></code></pre> will cause this.

I’m not supposed to be bold.

You can fix this by replacing every < and > with &lt; and &gt;. If you write your pages like I do in an editor with a search and replace feature like Notepad++ this is very easy to do, and you’ll get the desired results:

<strong>I’m not supposed to be bold.</strong>
Back to Top