Beefy Boxes and Bandwidth Generously Provided by pair Networks
Welcome to the Monastery
 
PerlMonks  

Comment on

( #3333=superdoc: print w/ replies, xml ) Need Help??

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.


In reply to Free Nodelet hack: Syntax colouring by Corion

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post; it's "PerlMonks-approved HTML":



  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • Outside of code tags, you may need to use entities for some characters:
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.
  • Log In?
    Username:
    Password:

    What's my password?
    Create A New User
    Chatterbox?
    and the web crawler heard nothing...

    How do I use this? | Other CB clients
    Other Users?
    Others pondering the Monastery: (7)
    As of 2014-09-03 09:07 GMT
    Sections?
    Information?
    Find Nodes?
    Leftovers?
      Voting Booth?

      My favorite cookbook is:










      Results (35 votes), past polls