[Melbourne-pm] Neat javascript stuff (easily syntax highlighting Perl code)

[Jacinta Richardson]

G'day folk,

This isn't (much) to do with Perl, but I thought you might be interested 
to know.  A month or so ago, I changed all of our Perl tips to have 
syntax highlighting: http://www.perltraining.com.au/tips/  I was 
supremely jealous of metacpan and cpan being able to do this so I wanted 
to see how.

Turned how that how metacpan was doing it (at least as I understood) was 
by using a javascript syntax highlighter from 
http://alexgorbatchev.com/SyntaxHighlighter/  How awesome!

You can do this by linking within the site, or by downloading the 
libraries and installing them yourself.  I chose the latter.

Then I edited our mason code to add this into the head block for all of 
our tips pages:

<link   href="/js/syntaxhighlighter/styles/shThemeDefault.css  <view-source:http://www.perltraining.com.au/js/syntaxhighlighter/styles/shThemeDefault.css>"rel="stylesheet"type="text/css"/>
<script  src="/js/syntaxhighlighter/scripts/shCore.js  <view-source:http://www.perltraining.com.au/js/syntaxhighlighter/scripts/shCore.js>"type="text/javascript"></script>
<script  src="/js/syntaxhighlighter/scripts/shAutoloader.js  <view-source:http://www.perltraining.com.au/js/syntaxhighlighter/scripts/shAutoloader.js>"type="text/javascript"></script>
<script  src="/js/syntaxhighlighter/scripts/shBrushPerl.js  <view-source:http://www.perltraining.com.au/js/syntaxhighlighter/scripts/shBrushPerl.js>"type="text/javascript"></script>


Paul added a filter so that all of our <pre> tags so that they come out as

<pre  class="brush: perl">


Finally, at the very end of our page we add:

<!-- Syntax Highlighter: http://alexgorbatchev.com/SyntaxHighlighter/ -->
<script  type="text/javascript">
      SyntaxHighlighter.defaults['gutter'] = false;
      SyntaxHighlighter.defaults['toolbar'] = false;

      SyntaxHighlighter.all()
</script>

And it's done!  Now all I need to do, when generating a perl tip, is to 
change any <pre> blocks that aren't around code to instead be <pre > and 
everything else will just look beautiful.  :)

You can see a lovely example with our latest tip on Text::CSV_XS: 
http://www.perltraining.com.au/tips/2012-11-07.html

So if you too want pretty, colourised Perl on your webpages, and you 
don't have an easier solution, yet, here's one you might find useful.

     J

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.pm.org/pipermail/melbourne-pm/attachments/20121112/dfcb8e8e/attachment.html>