MediaWiki: Formating and colouring Code

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 `` tag:
<br /> <!-- 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/ --><br /> <script language="javascript" src="/skins/common/SyntaxHighlighter/Scripts/shCore.js"></script><br /> <script language="javascript" src="/skins/common/SyntaxHighlighter/Scripts/shBrushCSharp.js"></script><br /> <script language="javascript" src="/skins/common/SyntaxHighlighter/Scripts/shBrushXml.js"></script><br /> <script language="javascript" src="/skins/common/SyntaxHighlighter/Scripts/shBrushSql.js"></script><br /> <script language="javascript" src="/skins/common/SyntaxHighlighter/Scripts/shBrushJScript.js"></script><br /> <script language="javascript" src="/skins/common/SyntaxHighlighter/Scripts/shBrushPhp.js"></script><br /> <script language="javascript"> dp.SyntaxHighlighter.HighlightAll('code'); </script>
>_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 `` 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<br /> /************************************************************<br /> ** Simple WikiMedia extension to create a new <codesyntax> tag that renders<br /> ** syntax highlighted through the dp.SyntaxHighlighter javascript helper<br /> ** See http://www.dreamprojections.com/syntaxhighlighter/<br /> ** See http://meta.wikimedia.org/wiki/Extending_wiki_markup<br /> ** (c) Renaud Bompuis, 2007<br /> ** ——————————————————————————<br /> ** v1.0 – 20EFB2007 : first version. Uses the <pre> tag to ensure that the content of<br /> ** the <textarea> containing the source code will not be messed up by WikiMedia.<br /> ** There are certainly better ways to do this, but they seem more complicated than this<br /> ** (registering hooks, recording content before it is expanded and then replacing<br /> ** messed up content with the original)<br /> ************************************************************/<br /> $wgExtensionFunctions[] = “wfSyntaxHighlighterExtension”;</p> <p>function wfSyntaxHighlighterExtension() {<br /> global $wgParser;<br /> $wgParser->setHook( “codesyntax”, “renderCodeSyntax” );<br /> }</p> <p>// The callback function for converting the input text to HTML output<br /> function renderCodeSyntax( $input, $argv, &$parser ) {<br /> $output = “<pre style=’border:0;padding:0;margin:0;’>”<br /> .”<textarea name=’code’ class='”.$argv[“lang”].”‘>”<br /> .Xml::escapeTagsOnly($input)<br /> .”</textarea></pre>” ;<br /> return $output;<br /> }<br /> ?>
Add the following line to the end of your `LocalSettings.php` file, right before the closing `?>` tag.
<br /> require_once ‘extensions/syntaxhighlighter.php’;<br />

###Usage###
To highlight code in your MediaWiki pages, just enclose your source code with the new `` 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:
<br /> <codesyntax lang=”c#”><br /> string url = “<a href=\”” + someObj.getUrl() + “\” target=\”_blank\”>l;”;<br /> // single line comments<br /> // second single line<br /> override protected void OnLoad(EventArgs e)<br /> {<br /> if(Attributes[“class”] != null)<br /> {<br /> //_year.CssClass = Attributes[“class”];<br /> }<br /> // base.OnLoad(e);<br /> }<br /> </codesyntax><br />
Will display as:
string url = “<a href=\”” + someObj.getUrl() + “\” target=\”_blank\”>”;<br /> // single line comments<br /> // second single line<br /> override protected void OnLoad(EventArgs e)<br /> {<br /> if(Attributes[“class”] != null)<br /> {<br /> //_year.CssClass = Attributes[“class”];<br /> }<br /> // base.OnLoad(e);<br /> }<br />

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