Javascript Code Formatting
Seek and ye shall find.
I posted yesterday about the trials and tribulations of code formatting. While I’ve solved the basic problems of displaying code, we spoiled programmers have gotten really used to syntax highlighting. Syntax highlighting offers a lot of visual differentiation of text which makes it a lot easer to read code.
Brennan posted a comment about adding syntax highlighting, possibly with Javascript. I thought that was a great idea and was all ready to jump in and write the code. As a precursor though (all good programmers are lazy remember) I decided to see if anything already existed.
And I nearly found perfection in dp.SyntaxHighlighter. It’s a Javascript library for syntax highlighting code snipits in HTML. It’s beautifully written code that takes advantage of cool javascript features like prototyping. Each language syntax is abstracted out into its own file with it’s own keyword definitions and comment definitions. As I said, it’s a beautifully engineered piece of code and really shows off the power and elegance of the much maligned Javascript language.
The only tweak I had to make to the code was that it had been hardcoded to work with <textarea> tags and was referencing the “value” attribute of that tag. I added a parameter to pass to the dp.sh.HighlightAll to set the parameter name to something else. That way I could make it work with the more semantically correct <code> tag.
Anyway I’m going to start playing with this and see if I can implement it on my blog. Check back soon for an update.
Update:
Well my little change didn’t work so well after all. Things like generics don’t work well within the <code> block. I think the browsers are trying to turn them into tags. Inside a <textarea> that doesn’t happen. So I guess you get to choose between semantic markup and pretty viewing.
Good find, and…
It works for me! Actually I have had the WYSIWYG editor for Wordpress off for a while but it still inserts break tags at the end of each line and encodes special characters, such is the single quote. That causes some of the inline Javascript to fail when it is in the blog entry.
I fixed it by placing a PRE tag around the TEXTAREA and then put the Javascript call to HighlightAll in the footer of my Wordpress templates. The PRE tag disables the HTML encoding and break tag insertions. I am now prepped to do C# and XML syntax highlighting.
http://brennan.offwhite.net/blog/2006/09/25/multiple-site-authentication-with-aspnet-20/
http://brennan.offwhite.net/blog/2006/09/25/robust-custom-profiles/
Pretty slick isn’t it.
You can fix the PRE issue for CODE blocks as well, check out the Update of my previous post on Wordpress Code Formatting. It’s a one-line-fix to remove BR tags from CODE blocks.
Of course if you’re going to use the Javascript syntax highlighting, stick with the TEXTAREA.
Although this a cool way to highlight code, I would be interested in ways to use Javascript to dress up some content. Perhaps I want autolink certain terms to Wikipedia or another source. You could wrap a term with a span tag and then use the class and title attributes to pass the data you need to set up the autolinking. In my blog entries I like to reference source materials whenever possible and this could cut down on some of the time to do that. The downside is that my blog would not benefit from trackbacks or the association with those sites which Google may use as the context for my pages.
In the download you get:
scripts/
one flash for clipboard
several language .js files
a main .js
styles/
a css file
You get an uncompressed file too.
WHAT YOU DON’T GET
A simple helloworld.html
I don’t care how bloody simple something is. You have to digg down into the comments OF THE USAGE PAGE, for an actual copy and pasteable example.
What the fuck. Do they not want people to use this?
I am a developer, I know Javascript, that isn’t the damn issue. If you release something like this, which isn’t a runtime distribution (is has uncompressed files) they should add a &$&#^ example file.
Idiots.
It is inconceivable that a test.html wasn’t included in the download. I repeat, the sheer idiocy of this is overwhelming.
Here is a base code, place it in the folder where you see the Scripts and Styles folders (what is with the capitalisation? M$ technology programmers? No wonder all their links were screwed up from all over the web pointing to their website with capitals.)
dp.SyntaxHighlighter.ClipboardSwf = ‘Scripts/clipboard.swf’; dp.SyntaxHighlighter.HighlightAll(‘code’);
dp.SyntaxHighlighter.ClipboardSwf = ‘Scripts/clipboard.swf’;
dp.SyntaxHighlighter.HighlightAll(‘code’);