Syntax Highlighting Take 2

Readers of my blog complained that they can't see the code I was syntax highlighted in RSS readers like Google reader. The reason is moderately interesting so I'll explain it:



HTML likes to gobble up white space, so if you're pasting in source code you use the PRE (preformatted text) tag. PRE shows up in fixed width font and preserves spacing; however you can't place < or > in PRE tags since they denote HTML tags, instead you need to use &lt or &gt (character entity references if you speak techno babble). This is annoying, especially given the blogger text editor gets confused when you edit PRE tags with nested < and > signs.



Speaking of < and >, source code, and HTML files, you often want to write javascript in an HTML file, and you then hit the similar problem that you want to write x < 99, but can't since '<' isn't valid HTML. To solve this problem you can put a CDATA(*) section in your script blocks, which allows you to use write x < 99.



So, to avoid specifying > and <, the author of SyntaxHighlight came up with a clever solution: Put the source code you'd like to display in a non-javascript script block using CDATA, and then use javascript on the page to convert these blocks to tables for the web browser to display.



This works great in your web browser, but RSS readers don't run the javascript that converts the dummy script blocks into tables and thus you can't see the code.  



Luckily, SyntaxHighlighter also supports an usage where you use specify your code in PRE blocks.  It's more annoying for me (for the above reasons), but it's better for my beloved readers since the PRE elements 'degrade' to non syntax highlighted pre blocks (instead of nothing) when in an RSS reader.





For all my RSS reader friends here is the snippet from the last blog post:

Console.Writeline("Hello World!")

Python:

print "Hello World"

NOTES:



(*) CDATA,aka: character data, is not interpreted as part of the document.  In CDATA,  >  means greater than and does not have to be written as character entity references. Unfortunately CDATA can not be placed in PRE blocks.

Posted in: web