Syntax Highlighting in tumblr

i wanted code i posted here to have syntax highlighting, and my favourite javascript library for doing such a thing happens to be SyntaxHighlighter - however, i work with several different languages and including every single brush script i might need seemed like a waste of bandwidth and HTTP connections.  so, using jQuery, i’ll discover what brush scripts i need for the posts displayed and include them dynamically only when i need them.  The following code assumes you’ve already included jQuery, the SyntaxHighlighter core files (shCore.js, shCore.css, and a theme) and that your tumblr posts are contained in an element with the class, “.post”:

if($('.post pre').length){
	// Base URL to load brushes from
	var shBaseURL = 'http://alexgorbatchev.com/pub/sh/current/scripts/';
	// Define the brush script file names you need
	var shBrushScripts = {
		//keyword	filename
		'as3':		'shBrushAS3.js',
		'bash':		'shBrushBash.js',
		'shell':	'shBrushBash.js',
		'cpp':		'shBrushCpp.js',
		'css':		'shBrushCss.js',
		'diff':		'shBrushDiff.js',
		'patch':	'shBrushDiff.js',
		'jscript':	'shBrushJScript.js',
		'js':		'shBrushJScript.js',
		'perl':		'shBrushPerl.js',
		'pl':		'shBrushPerl.js',
		'php':		'shBrushPhp.js',
		'plain':	'shBrushplain.js',
		'text':		'shBrushplain.js',
		'python':	'shBrushPython.js',
		'py':		'shBrushPython.js',
		'ruby':		'shBrushRuby.js',
		'rails':	'shBrushRuby.js',
		'sql':		'shBrushSql.js',
		'xml':		'shBrushXml.js',
		'xhtml':	'shBrushXml.js',
		'html':		'shBrushXml.js',
		'xslt':		'shBrushXml.js'
	};
	
	var shTotalScripts = [];	// holder for total scripts to load
	var shLoadedScripts = 0;	// holder for total scripts loaded
	
	// find any existing script tags in need of syntax highlighting
	$('.post pre').each(function(){
		var found = /brush:\s+(\w+)/.exec($(this).attr('class'));
		// test that the tag has a brush attribute
		if(found != null && found.length > 1){
			var brush = found[1];
			// if it's a valid brush & isn't set to load already,
			// add it to includes array
			if(
				typeof(shBrushScripts[brush]) != 'undefined' &&
				shTotalScripts.indexOf(shBrushScripts[brush]) == -1
			){
				// add brush url to include holder
				shTotalScripts.push(shBrushScripts[brush]);
			}
		}
	});
	
	// no need to search any more if we don't have brushes to load
	if(shTotalScripts.length){
		// include each brush script
		for(var i = 0, j = shTotalScripts.length; i < j; i++){
			$.getScript(shBaseURL + shTotalScripts[i], function(){
				// mark down this brush as loaded
				shLoadedScripts++;
				// if we've got all the brushes loaded, highlight the page
				if(shLoadedScripts > 0 && shLoadedScripts == shTotalScripts.length){
					// set options for SyntaxHighlighter
					SyntaxHighlighter.config.strings.alert = '';
					SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
					SyntaxHighlighter.defaults['smart-tabs'] = true;
					SyntaxHighlighter.defaults['light'] = true;
					SyntaxHighlighter.defaults['class-name'] = 'syntaxhighlighted';
					// enable highlighting!
					SyntaxHighlighter.all();
				}
			});
		}
	}
}

the configuration used here assumes you’ll be placing code inside <pre> tags. be aware: tumblr’s TinyMCE config doesn’t provide a button for <pre>, and trying to edit a post containing them may cause extraneous line breaks to be added to anything within those <pre> tags or escaped <br>’s for some reason. pain in the ass, but tumblr also strips out newlines in <code> tags so it’s the best option if your post is ever going to be viewed outside your template, which it will be. this can be avoided entirely by using the plain text editor, but that’s no fun at all.

update: why don’t i just extend tumblr’s tinyMCE install with greasemonkey? i dunno daniel, why don’t you? stay tuned.