Code2Html
When I first started blogging, I used code2html at http://www.palfrader.org/code2html. It's a fully functional syntax highlighter... but the result really isn't that pretty. It's actually very bare bones. But it was pretty easy to use. You can do the "code to html"-ing on their website or you can download a stand alone application (it's a perl script) to do the conversion offline. The documentation is good and I had no problem using it. I could easily produce the following code example:
1 alert("Hello World!")Ruby Rio and Syntax
I really didn't have a problem with using code2html until I started getting interested in ruby, which led me to find blogs with code examples like this (I'm using an image as the example for convenience in this case):
The entire process to format the ruby code this way is very well described on Wolfmans Howling's blog at http://blog.wolfman.com/articles/2006/05/26/howto-format-ruby-code-for-blogs. But as cool as it is, it only works well with ruby code, and I eventually decided I needed something to highlight the other languages I use too.Syntax Highlighter
That led me to Syntax Highlighter, which is the solution I currently use. It's an interesting take on syntax highlighting in that it does the conversions on the fly and is entirely written in javascript. It goes through the web page's dom tree at load time and replaces any code blocks contained by a "<pre name='code'>" tag and converts its content to syntax highlighted code. It supports many options, such as line numbering and columns. Take a look at http://code.google.com/p/syntaxhighlighter, the documentation is good and clear. Syntax Highlighter is very good looking and very simple to use.
However, I prefer static html code and don't find it inconvenient to have to convert and paste the code myself. I figured that if I do the highlighting once myself, it's less strain on the user's computer. I also wanted to add a title to the code block as well as change the appearance a little. Since all the javascript is freely available, I made a lot of my own modifications to resolve those issues. It was pretty fun to do and a good javascript exercise for me. It did take some work to finesse everything, but I think I got it all working correctly.
You can download my solution here. Because it's a javascript-only solution, you can run it offline. Just open up the index.html file in your browser, enter your code, and press the convert code link. Then you can copy the code from the result textbox to whatever page you want. Just remember to include a css file, shCoreStaticInclude.js, and the clipboard.swf file in whatever page you paste the code on. I wrote up detailed instructions here. If you want to give it a try online, I have it at http://syntaxhighlighter.relic19.net. That page has a much more detailed description of the process I just described. Here's a sample from my modified syntax highlighter:
- alert("Hello World!");
Quick Highlighter
While I was playing with Syntax Highlighter I came across another top notch syntax highlighter called Quick Highlighter at http://quickhighlighter.com. It converts code to html, much like code2html. You can allow the css to be embedded to avoid having to link to a separate css file. It supports way more languages and formatting options compared to Syntax Highlighter. It's almost as pretty as Syntax Highlighter too. The only downside is that it seems to work exclusively through a web interface, which is why I ultimately decided against using it. Syntax Highlighter is a lot more customizable for me since I can download and muck around with the source code, changing the way it operates, a feat I couldn't as easily do with Quick Highlighter. However, if I found quickhighlighter before I found any of the other solutions, then I probably would have never switched from it. Here's a sample from Quick Highlighter:
- alert("Hello World!");
Gist
I also came across Gist, at http://gist.github.com/, as a syntax highlighter. The nicest thing about Gist is that it does all the work for you. You type in code on their webpage and it gives you code to embed on your webpage. You don't need to add any extra includes or css files or even register yourself at their website... Gist takes care of everything for you. It's open source, so you can use your own server if you don't trust Gist. I like my Syntax Highlighter more because of the appearance and options... but really, it's just my personal taste. I definitely see the usefulness, in the simple convenience, of this solution.
To use it, simply go through their website and enter your code to get the embedded code snippet, such as...
- <script src="http://gist.github.com/24490.js"></script>
More Highlighters
Here are some other highlighters. Check them out if you'd like. I didn't see anything extraordinarily special about them, so I don't want to do full write ups... but options are always nice, I guess. They have good documentation of their own. Let me know in the comments if you know of any other syntax highlighters!
http://wiki.ahnfelt.dk/Highlighter.html
http://pygments.org/
http://shjs.sourceforge.net/
