Of course, as you know jQuery Litelighter doesn’t come with a toggle by default. By toggle I am referring to a link to turn on and off the syntax highlighting so you get a clean text for copy and paste. Litelighter was built to be super light weight and easy to theme, so you have a great opportunity to design something for yourself.

First, lets attach a Litelighter to some code:

// the overwhelmingly difficult init
$('pre').litelighter();

Not too difficult. Now we want to place a link above each pre to toggle. With jQuery this is dirt simple:

$('pre').litelighter().each(function(i,el){
	var $t = $(this);

	$('<a href="#" class="lltoggle">Text</a>').insertBefore($t).click(function(e){
		e.preventDefault();
		var $a = $(this);
		if($a.text() == 'Text'){
			$t.litelighter('disable');
			$a.text('Code');
		}
		else{
			$t.litelighter('enable');
			$a.text('Text');
		}
	});
});

After we have attached Litelighter we just go through each one and add a link before. How easy is that!? We could theoretically avoid the each() and just use before(), but then we would have to traverse to find the pre. If you want to see what it looks like, well, you’re looking at it. The new blog design implements this.

If you would like to learn more about jQuery Litelighter for syntax highlighting visit the documentation. Enjoy!