Prettify + jQuery
Find <code> tags preceeded by <!-- language: lang-xxx --> comment ad prettify them.
by alessandro_pezzato
HTML
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<link rel="stylesheet" href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css">
<div id='container'>
<!-- language: lang-javascript -->
<pre><code>
jQuery(document).ready(function(){
alert('Hello!');
}
</code></pre></div>
JavaScript
jQuery.fn.prettify = function() {
var count = 0;
function addLanguageClass(index, node) {
var $parent = $(node).parent().parent();
$parent.contents().each(function(index, node) {
if (node.nodeType == 8) {
var language = $.trim(node.nodeValue);
if ((/^language/).test(language)) {
language = language.replace(/language *: */, '');
if (node.nextSibling.nextSibling.nodeName == 'PRE') {
var $pre = $(node.nextSibling.nextSibling);
var $code = $('code', $pre);
$code.addClass('prettyprint').addClass(language);
++count;
}
}
}
});
}
$('code', this).each(addLanguageClass);
if (count) {
prettyPrint();
}
}
$(document).ready(function() {
$('#container').prettify();
});