syntax sensation: A comparison of syntax highlighters

define CSS styles in html

I added 2 CSS definitions, .block-code, which I'm using here, and .inline-code. The definitions are in this Gist: Which looks like this:
To see the XKCD Python comic, type: import antigravity

>>> import this
The Zen of Python, by Tim Peters
 
Beautiful is better than ugly.
Explicit is better than implicit.
Simple is better than complex.
Complex is better than complicated.
Flat is better than nested.
Sparse is better than dense.
Readability counts.
Special cases aren't special enough to break the rules.
Although practicality beats purity.
Errors should never pass silently.
Unless explicitly silenced.
In the face of ambiguity, refuse the temptation to guess.
There should be one-- and preferably only one --obvious way to do it.
Although that way may not be obvious at first unless you're Dutch.
Now is better than never.
Although never is often better than *right* now.
If the implementation is hard to explain, it's a bad idea.
If the implementation is easy to explain, it may be a good idea.
Namespaces are one honking great idea -- let's do more of those!

I have been using <pre></pre> tags for blocks of code and <span></span> for inline code instead of <code></code> and that seems to work great. Some downsides of this approach are that there are no line numbers, no syntax highlighting, and it doesn't scroll.

google-code-prettify

This is a very simple syntax highlighter. It works similar to mathjax, the embedded Gist in the previous section and some of my NPR posts, by loading a js script from the web.

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

It automatically detects languages, e.g. Python, there are several skins (this is sons-of-obsidian), and you can add linenumbers. It will format <pre></pre> and <code></code> tags that contain class="prettyprint", but it doesn't use <span></code> tags. For line numbers use class="prettyprint linenum".

#!/usr/bin/python

def fib():
  '''
  a generator that produces the elements of the fibonacci series
  '''

  a = 1
  b = 1
  while True:
    a, b = a + b, a
    yield a

def nth(series, n):
  '''
  returns the nth element of a series,
  consuming the earlier elements of the series
  '''

  for x in series:
    n = n - 1
    if n <= 0: return x

print nth(fib(), 10)

SyntaxHighlighter

This is the most ubiquitous and snazzy highlighter. Same as prettify, you load javascript.

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeFadeToGrey.css" rel="stylesheet" type="text/css" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript"></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

Then use <pre class="brush: python">your Python code goes here</pre>. It scrolls nicely, and there are several themes and supported languages - just load the appropriate brush script, e.g.: "shBrushPython.js" script, then specify the language in lower case, i.e.: "python". The <script></script> mode doesn't work on Blogger, and note the bloggerMode = true configuration in the script. Also, there is no inline mode, but there is a nice scrollbar.

#!/usr/bin/python

def fib():
  '''
  a generator that produces the elements of the fibonacci series
  '''

  a = 1
  b = 1
  while True:
    a, b = a + b, a
    yield a

def nth(series, n):
  '''
  returns the nth element of a series,
  consuming the earlier elements of the series
  '''

  for x in series:
    n = n - 1
    if n <= 0: return x

print nth(fib(), 10)