<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body bgcolor="#FFFFFF" text="#000000">
G'day folk,<br>
<br>
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:
<a class="moz-txt-link-freetext" href="http://www.perltraining.com.au/tips/">http://www.perltraining.com.au/tips/</a> I was supremely jealous of
metacpan and cpan being able to do this so I wanted to see how.<br>
<br>
Turned how that how metacpan was doing it (at least as I understood)
was by using a javascript syntax highlighter from
<a class="moz-txt-link-freetext" href="http://alexgorbatchev.com/SyntaxHighlighter/">http://alexgorbatchev.com/SyntaxHighlighter/</a> How awesome!<br>
<br>
You can do this by linking within the site, or by downloading the
libraries and installing them yourself. I chose the latter.<br>
<br>
Then I edited our mason code to add this into the head block for all
of our tips pages:<br>
<br>
<pre id="line1"><span><<span class="start-tag">link</span> <span class="attribute-name">href</span>="<a href="view-source:http://www.perltraining.com.au/js/syntaxhighlighter/styles/shThemeDefault.css" class="attribute-value">/js/syntaxhighlighter/styles/shThemeDefault.css</a>" <span class="attribute-name">rel</span>="<a class="attribute-value">stylesheet</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text/css</a>" <span>/</span>></span><span>
<span id="line15"></span></span><span><<span class="start-tag">script</span> <span class="attribute-name">src</span>="<a href="view-source:http://www.perltraining.com.au/js/syntaxhighlighter/scripts/shCore.js" class="attribute-value">/js/syntaxhighlighter/scripts/shCore.js</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>"></span><span></span><span></<span class="end-tag">script</span>></span><span>
<span id="line16"></span></span><span><<span class="start-tag">script</span> <span class="attribute-name">src</span>="<a href="view-source:http://www.perltraining.com.au/js/syntaxhighlighter/scripts/shAutoloader.js" class="attribute-value">/js/syntaxhighlighter/scripts/shAutoloader.js</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>"></span><span></span><span></<span class="end-tag">script</span>></span><span>
<span id="line17"></span></span><span><<span class="start-tag">script</span> <span class="attribute-name">src</span>="<a href="view-source:http://www.perltraining.com.au/js/syntaxhighlighter/scripts/shBrushPerl.js" class="attribute-value">/js/syntaxhighlighter/scripts/shBrushPerl.js</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>"></span><span></span><span></<span class="end-tag">script</span>></span><span>
<span id="line18"></span></span></pre>
<br>
Paul added a filter so that all of our <pre> tags so that they
come out as <br>
<br>
<pre id="line1"><span><<span class="start-tag">pre</span> <span class="attribute-name">class</span>="<a class="attribute-value">brush: perl</a>"></span><span></span></pre>
<br>
Finally, at the very end of our page we add: <br>
<br>
<pre id="line1"><span class="comment"><!-- Syntax Highlighter: <a class="moz-txt-link-freetext" href="http://alexgorbatchev.com/SyntaxHighlighter/">http://alexgorbatchev.com/SyntaxHighlighter/</a> --></span><span>
<span id="line349"></span></span><span><<span class="start-tag">script</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>"></span><span>
<span id="line350"></span> SyntaxHighlighter.defaults['gutter'] = false;
<span id="line351"></span> SyntaxHighlighter.defaults['toolbar'] = false;
<span id="line352"></span>
<span id="line353"></span> SyntaxHighlighter.all()
<span id="line354"></span></span><span></<span class="end-tag">script</span>></span>
</pre>
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. :)<br>
<br>
You can see a lovely example with our latest tip on Text::CSV_XS:
<a class="moz-txt-link-freetext" href="http://www.perltraining.com.au/tips/2012-11-07.html">http://www.perltraining.com.au/tips/2012-11-07.html</a><br>
<br>
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.<br>
<br>
J<br>
<pre id="line1"><span></span><span></span></pre>
</body>
</html>