Cypris' lookout

MediaWiki: Formating and colouring Code

Tuesday, February 20, 2007

MediaWiki is the wiki software behind WikiPedia.
The issue, when using it as a software development tool, is formatting code in a pretty way. As we did with WordPress before, here are some details to make dp.SyntaxHighlighter work fairly seamlessly with MediaWiki.

Install the client-side highlighter

Download dp.SyntaxHighlighter. Uncompress its content under a new /skins/common/SyntaxHighlighter folder in your MediaWiki installation (don’t forget to make sure the files can be read by the web server; for instance, on Linux you may use chown apache.apache -R *).

In the skin template you are using for your MediaWiki site, insert the necessary code as required. In my example, I use the default /skins/MonoBook.php template into which I added the following:

Just before the closing </head> tag:
<!-- http://www.dreamprojections.com/syntaxhighlighter/ --> <link type="text/css" rel="stylesheet" href="/skins/common/SyntaxHighlighter/Styles/SyntaxHighlighter.css"></link>Just before the closing tag:<!-- http://www.dreamprojections.com/syntaxhighlighter/ --> <script language="javascript" src="/skins/common/SyntaxHighlighter/Scripts/shCore.js"></script> <script language="javascript" src="/skins/common/SyntaxHighlighter/Scripts/shBrushCSharp.js"></script> <script language="javascript" src="/skins/common/SyntaxHighlighter/Scripts/shBrushXml.js"></script> <script language="javascript" src="/skins/common/SyntaxHighlighter/Scripts/shBrushSql.js"></script> <script language="javascript" src="/skins/common/SyntaxHighlighter/Scripts/shBrushJScript.js"></script> <script language="javascript" src="/skins/common/SyntaxHighlighter/Scripts/shBrushPhp.js"></script></p> <script language="javascript"> dp.SyntaxHighlighter.HighlightAll('code'); </script> <p>

Note that you must include a reference to each source file corresponding to the type of programming language you want to highlight.
Have a look under the /skins/common/SyntaxHighlighter/Scripts/ folder to see which languages you can highlight; there are a lot more than the few I use on my site.

Install the WikiMedia extension

I’ve created a small extension to WikiMedia to allow us to enclose any source code in a new <codesyntax> tag. Click on the View Plain option below and copy-paste the following code into a new file that you will save under /extensions/syntaxhighlighter.php (again, make sure this is readable by the webserver).
<?php /************************************************************ ** Simple WikiMedia extension to create a new <codesyntax> tag that renders ** syntax highlighted through the dp.SyntaxHighlighter javascript helper ** See http://www.dreamprojections.com/syntaxhighlighter/ ** See http://meta.wikimedia.org/wiki/Extending_wiki_markup ** (c) Renaud Bompuis, 2007 ** —————————————————————————— ** v1.0 – 20EFB2007 : first version. Uses the <pre> tag to ensure that the content of ** the <textarea> containing the source code will not be messed up by WikiMedia. ** There are certainly better ways to do this, but they seem more complicated than this ** (registering hooks, recording content before it is expanded and then replacing ** messed up content with the original) ************************************************************/ $wgExtensionFunctions[] = “wfSyntaxHighlighterExtension”;</p> <p>function wfSyntaxHighlighterExtension() { global $wgParser; $wgParser->setHook( “codesyntax”, “renderCodeSyntax” ); }</p> <p>// The callback function for converting the input text to HTML output function renderCodeSyntax( $input, $argv, &$parser ) { $output = “<pre style=’border:0;padding:0;margin:0;’>” .”<textarea name=’code’ class='”.$argv[“lang”].”‘>” .Xml::escapeTagsOnly($input) .”</textarea></pre>” ; return $output; } ?>
Add the following line to the end of your LocalSettings.php file, right before the closing ?> tag.
require_once ‘extensions/syntaxhighlighter.php’;

Usage

To highlight code in your MediaWiki pages, just enclose your source code with the new <codesyntax> tag. This tag takes a lang attribute to specify the options that normally would be listed in the class attribute in the dp.SyntaxHighlighter documentation.

For example:
<codesyntax lang=”c#”> string url = “<a href=\”” + someObj.getUrl() + “\” target=\”_blank\”>l;”; // single line comments // second single line override protected void OnLoad(EventArgs e) { if(Attributes[“class”] != null) { //_year.CssClass = Attributes[“class”]; } // base.OnLoad(e); } </codesyntax>
Will display as:
string url = “<a href=\”” + someObj.getUrl() + “\” target=\”_blank\”>”; // single line comments // second single line override protected void OnLoad(EventArgs e) { if(Attributes[“class”] != null) { //_year.CssClass = Attributes[“class”]; } // base.OnLoad(e); }

For more information on using dp.SyntaxHighlighter see:
http://www.dreamprojections.com/syntaxhighlighter/Usage.aspx

Entry Filed under  :  Linux,Programming,sysadmin,Web Design