Loading SyntaxHighlighter on demand

Tue, 01 Sep 09 22:12:07 +0200

SyntaxHighlighter is a great JavaScript script, but it lacks one important feature in my opinion. For this blog, I needed a syntax highlighter for the code examples that will be shown here. I soon found SyntaxHighlighter as I was looking for an unobtrusive JavaScript solution. But there's one thing that I didn't like about it. You need to load all JavaScript files in advance even if you don't need syntax highlighting on a given page. This is not a problem when you're building static pages, because then you can just include the needed JavaScript files yourself. For this blog however I wanted SyntaxHighlighter to be loaded on demand without specifying for which page the SyntaxHighlighter should be loaded. So I came up with the nifty JavaScript solution below. It uses jQuery because jQuery is already loaded on all pages of this blog. But it shouldn't be so hard to do the same without jQuery.


$(document).ready(
	function() {

		// only load syntax hilighter when needed
		// So check for any HTML <pre> elements for which the class attribute starts with 'brush'
		if ($("pre[class^=brush]").length > 0) {
	
			var jsPath = themeUrl + '/js/hilighter/';
			var cssPath = themeUrl + '/css/hilighter/';
	
			// Defines which languages should be supported
			var brushes = ['Bash','Php','Plain','JScript', 'Sql'];
	
			var jsBrushes = '';
			for (var i = 0; i < brushes.length; i) {
				jsBrushes  = '<script src="' + jsPath + 'shBrush' + brushes[i] + '.js" type="text/javascript"></script>';
			}
	
			// Append SyntaxHighlighter scripts to the HTML head
			$("head").append(
				'<script src="' + jsPath + 'shCore.js" type="text/javascript"></script>' +
				  jsBrushes +
				  '<link rel="stylesheet" href="' + cssPath + 'shCore.css" type="text/css">' +
				  '<link rel="stylesheet" href="' + cssPath + 'shThemeDefault.css" type="text/css">'
			);
			// Apply SyntaxHilighlighter
			SyntaxHighlighter.all();
		}
	}
);

I think the script is pretty much self-explanatory. First we check if there are one or more PRE-elements having a classname that starts with "brush". If one or more of such PRE-elements exist in our HTML code, the appropriate SyntaxHighlighter CSS and JavaScript files will be loaded by adding script tags to the HTML head.

About me

Fri, 14 Aug 09 21:30:52 +0200

Hi, my name is Joris van de Sande. From the moment that I was born in 1983, I have always been interested in technology. My first experience with a PC was back in 1991 when my parents bought their first PC (based on an Intel 80286 processor). In these days I used the computer to play games like Tetris, Digger and Space Invaders and to create documents in Word Perfect 5.1 (for DOS). Fast forward a few years (I think it must be 1996) and I was playing around with DBase III databases. A couple of months later my dad learned me how to interact with the DBase databases via the programming language Clipper and how to create a simple user interface with it. After some time my first useful program called "Taal" (which means "Language" in Dutch) was born. I used it to learn foreign languages like English and German. In 1999 I created a simple HTML website for my group of friends, to let the world know about our existence. That was one of my first experiences with building websites. One year later I redesigned the website (with Dreamweaver) and I wanted the website to be more interactive, so I stumbled upon PHP (version 3.x at that time) and started writing PHP scripts. Soon a MySql database was in use too.
© geeksaresexy.net A couple of years, programs and websites later I went to college and I received my bachelor degree in Computer Science in 2005. In November 2005, I started working as a Junior Application Programmer at Prezent Internet. At that time I was mainly working on customer websites (build in PHP), creating frontends and new modules for the CMS that was build in house. Today I work as a Software Architect at Prezent Internet. I am responsible for the architecture of most web applications that are build by Prezent Internet today. Besides that I spend my days coding (PHP, JavaScript, HTML, CSS and MySql), teaching my colleagues about software design and object oriented programming, maintaining the CMS and sometimes I even act as a system administrator (for Windows and Linux). When I have some spare time I like to listen to music, watch (action) movies or one of my favorite TV series (Numb3rs, NCIS and House), drink some beer with my friends, visit a dance festival, browse the Internet for interesting (open source) projects and other stuff that I am interested in, play with different operating systems and I like programming.

Devplace

Loading SyntaxHighlighter on demand

About me