http://www.perlmonks.org?node_id=606083

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>

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>

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

Replies are listed 'Best First'.
Re: Free Nodelet hack: Syntax colouring
by pKai (Priest) on Mar 25, 2007 at 22:35 UTC

    I have been playing a little with the jaap variation.

    3 remarks at the moment:

    1. (strictly technical - easy(?) fix)

      In the js file on line 43 the regexp for "quoted strings" reads:

      /('|"|`).*?\1/

      I want to propose the following regexp for this purpose, which handled multiline quotes and embedded escaping correct in my (limited) tests (UA: FF2, IE7)

      /('|"|`)(?:\\\\|[\r\n]|\\\1|.)*?\1/

    2. (technical (?!) - no fix for now)

      while testing the above with IE7 I noticed that the "autowrap" problem can not be worked around with the display settings in this browser. (A lot of linebreaks are just ignored.) Somebody who does feel more pity than me for IE7-using perlmonks might have a look into this. I didn't test IE6 for lack of availability at the moment

    3. (personal opinion on usefulness)

      While I'm not totally convinced if I stay with highlighting on code-blocks, I found the feature quite useful with inline-code!

      To activate inlinecode highlighting add

       || pre.className == "inlinecode"

      to the if condition in line 156 at the end of the js file.

      pKai:

      Well, at work I'm now forced to use IE v6(1), and the autowrap problem exists here too. Have you seen a reference to a solution for this platform yet? I'm trying to fix it on my box, but no success as of yet. (I've not used javascript before...)

      (1) Specifically, version 6.0.2900.2180.xpsp_sp2_qfe.070227-2300

      ...roboticus

Re: Free Nodelet hack: Syntax colouring
by bsdz (Friar) on Mar 22, 2007 at 22:31 UTC
    Nice one! I was thinking of doing something similar myself recently. I am using your 2nd snippet :)

      ...really like it, I will notice that and then the files can be hosted on the PerlMonks machines themselves.

      I really like it, and I tried it, and you shouldn't use your server logs as a measure of the people who like it. Personally, I took the stuff back out of my free nodelet because I don't want to get all addicted to one of the middle versions until I see what the final solution looks like.

      -Paul

Re: Free Nodelet hack: Syntax colouring
by jdporter (Paladin) on Mar 22, 2007 at 18:53 UTC

    This totally doesn't work for me. I wonder if it's clashing with other CSS I load.

Re: Free Nodelet hack: Syntax colouring
by wazoox (Prior) on Mar 23, 2007 at 21:14 UTC
    Really very cool, thanks for that simple and nice enhancement! It should be made into an official add-on to the monastery....
Re: Free Nodelet hack: Syntax colouring (THX!)
by LanX (Saint) on Aug 30, 2009 at 22:40 UTC
    Excellent, works very nice for me... =)

    ... just had some problems to notice that I have to filter the '+' from the url maybe you should link http://datenzoo.de/pub/prettify-ja+ap.js to the correct file on your server! ;-)

    (OK, the second best solution would be just a newline before src= to avoid line wrapping...)

    Cheers Rolf

      There is no "+" in the code if you use the "[download code]" link instead of cut'n'paste. Alternatively, you can edit your user settings and disable code wrapping, if you want to cut and paste, but that will lead to widened pages.

        I know all of this, but do beginners, too???

        A simple return to break the script-tag into two lines and you may double the number of users...

        Strange, you as a MS fan should care about brainless users ... ;-D

        Cheers Rolf

        update:

        <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-jaap.js"></script>
        That can be easily fixed with CSS overflow: auto;, you get horizontal scrolling bar instead of wide pages.
Re: Free Nodelet hack: Syntax colouring
by Anonymous Monk on Aug 31, 2009 at 00:35 UTC
    You could add a class id to <font color="red">+</font> used for wrapping