I discovered "google-code-prettify" today. It is a CSS and JavaScript library that tries to add syntax colouring to any code block, and it also tries to guess the language. The README file tells us that Perl support isn't that great but it'll be hard to have really great Perl syntax highlighting in a general syntax highlighter. I thought it could be neat to try this for PerlMonks anyway and it was a simple hack to put it to work, thanks to the Free Nodelet:

Put the below code into your Free Nodelet:

<script>
var headID = document.getElementsByTagName("head")`[0`];         
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = 'http://datenzoo.de/pub/prettify.css';
cssNode.media = 'screen';
headID.appendChild(cssNode);
</script>
<script type="text/javascript" src="http://datenzoo.de/pub/prettify.js
+"></script>

<script>
prettyPrint();
</script>
[download]

My modification to the JavaScript was really minor - I commented out the rendering for <code> and <xmp> tags because PerlMonks doesn't use them and switched the class to be used from prettyprint to code because that's what PerlMonks uses. I don't know why the JavaScript doesn't use an XPath query but maybe XPath isn't as portable as the looping over the child nodes and grepping for the correct CSS class. I think the code could be patched to use an XPath query of //pre[@class="code"].

The CSS and JavaScript files are currently hosted on my server, but if that machine should go away or people really like it, I will notice that and then the files can be hosted on the PerlMonks machines themselves.

Update: Thanks to the memory of bart, who pointed out (Client side) Perl Syntax Highlighter to me, there are now also the files for that highlighter. That other highlighter is far better suited for highlighting Perl code, at least judging from the regular expressions it employs. To switch to it, just use the following code in your Free Nodelet:

<script>
var headID = document.getElementsByTagName("head")`[0`];         
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = 'http://datenzoo.de/pub/prettify-jaap.css';
cssNode.media = 'screen';
headID.appendChild(cssNode);
</script>
<script type="text/javascript" src="http://datenzoo.de/pub/prettify-ja
+ap.js"></script>
[download]

Update2 rhesa points out that you might need to disable "autowrap" in your Display Settings to make this work.