[Melbourne-pm] Neat javascript stuff (easily syntax highlighting Perl code)
Jacinta Richardson
jarich at perltraining.com.au
Sun Nov 11 17:40:09 PST 2012
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>
More information about the Melbourne-pm
mailing list