Das Framework SyntaxHighlighter eignet sich für so ziemlich alle gängigen Programmier- und Auszeichnungssprachen inklusive HTML, CSS und auch SQL. Es müssen lediglich 2 JS-Dateien und die entsprechenden Styles eingebunden werden.

Im Artikeltext markiert man den Code dann mit einem umschließenden <pre> und erweitert es mit dem Klassenkonstrukt class="brush: js;" (hier JavaScript). Soll innerhalb des Preview-Tags auch HTML erkannt werden muss noch ein html-script: true hinzugefügt werden. Zugutelertz muss die Funktion SyntaxHighlighter.all(); zum Starten aufgerufen werden.

Quellcode:

<pre class="brush: js; html-script: true">
$(document).ready(function() {
	$('a[rel*="external"]').click(function(){
		$(this).attr('target','_blank');
	});
});

<span>noch etwas html...</span>

Das ganze sieht dann so aus:

$(document).ready(function() {
	$('a[rel*="external"]').click(function(){
		$(this).attr('target','_blank');
	});
});

noch etwas html...

Viel Spaß!