Tuesday, March 3, 2009

A One Line Syntax Highlighter Script

Because programming is a repeated topic of this blog, I was pleased to find the syntax highlighter on Google Code. It's a set of javascripts that highlights code of several different languages and formats so that it is easy to read embedded in websites, but is still easy to copy to plain text.

The problem was, I wanted to be able to modify and configure the highlighter in one place and have it affect all of my blogs and my co-workers' blogs. I thought that you may want to use this technique yourself or you're more than welcome to just use the script I wrote.

To use my script, just add the following script tag to your page just above the closing body tag (i.e., </body>):
<script language='javascript' src='http://www.emeraldsoftwaregroup.com/content/SyntaxHighlighter/Uncompressed/SetupHighlighter.js'></script>
One caveat is that if I change something, it will affect your highlighed code; however, if you trust me not to do anything dumb, then it should be fine :).

If you'd like to implement the technique, here's what's in the SetupHighlighter.js file:
document.write("<link href='http://www.emeraldsoftwaregroup.com/content/SyntaxHighlighter/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>");

function include(script_filename) {
document.write('<scr' + 'ipt type="text/javascript" src="' + script_filename + '"></' + 'script' + '>');
}

include('http://www.emeraldsoftwaregroup.com/content/SyntaxHighlighter/Uncompressed/shCore.js');
include('http://www.emeraldsoftwaregroup.com/content/SyntaxHighlighter/Uncompressed/shBrushPython.js');
include('http://www.emeraldsoftwaregroup.com/content/SyntaxHighlighter/Uncompressed/shBrushCSharp.js');
include('http://www.emeraldsoftwaregroup.com/content/SyntaxHighlighter/Uncompressed/shBrushCss.js');
include('http://www.emeraldsoftwaregroup.com/content/SyntaxHighlighter/Uncompressed/shBrushJScript.js');
include('http://www.emeraldsoftwaregroup.com/content/SyntaxHighlighter/Uncompressed/shBrushPhp.js');
include('http://www.emeraldsoftwaregroup.com/content/SyntaxHighlighter/Uncompressed/shBrushRuby.js');
include('http://www.emeraldsoftwaregroup.com/content/SyntaxHighlighter/Uncompressed/shBrushSql.js');
include('http://www.emeraldsoftwaregroup.com/content/SyntaxHighlighter/Uncompressed/shBrushXml.js');
include('http://www.emeraldsoftwaregroup.com/content/SyntaxHighlighter/Uncompressed/ExecuteHighlighter.js');

All of the scripts that start with sh are the syntax highlighter brushes. I've included the ones I use here, but I'll obviously be adding the rest because other people using my hosted script may need them. The last script actually executes the highlighter, and here's what's in that file:
document.write('<scr' + 'ipt type="text/javascript">dp.SyntaxHighlighter.BloggerMode();dp.SyntaxHighlighter.HighlightAll("code");</script>')
I hope you enjoy it and let me know if you notice any problems or you have any requested changes.

1 comment:

  1. Thanks, but this approach won't work for Wordpress.com because they suppress external JavaScript. I think they suppress external CSS as well, but don't think I've tried that approach.

    ReplyDelete