Here’s a short tutorial on how to integrate Google’s “prettify.js” (which does automatic syntax highlighting of code snippets) into a MediaWiki wiki installation.
This is totally done MacGyver style, we’re going to patch the MediaWiki skin to do it.
For the purposes of the steps below, I’ll assume you’re using the standard “Monobook” skin, otherwise I’m sure it roughly applicable for other skins as well.
- Download a copy of prettify.js
- Unzip it and put the *.js and *.css files into a folder called “pretty“.
- Move the “pretty” folder into /your-mediawiki-root-folder/skins/monobook folder.
- You should now have a folder /your-mediawiki-root-folder/skins/monobook/pretty with all the code in it.
- We need to modify the file /your-mediawiki-root-folder/skins/MonoBook.php so open it up in your favourite text editor.
- Find the line “<?php $this->html(‘headlinks’) ?>” and add the two following lines:
<link href=”<?php $this->text(‘stylepath’) ?>/monobook/pretty/prettify.css” type=”text/css” rel=”stylesheet” />
<script type=”text/javascript” src=”<?php $this->text(‘stylepath’) ?>/monobook/pretty/prettify.js”></script> - Find the line that starts “<body ” and change the line that immediately follows it to:
onload=”<?php $this->text(‘body_onload’) ?>; prettyPrint();” - Save “MonoBook.php”
- Now on any page where you wish to syntax-highlight code, use a <pre></pre> tag modified as such:
<pre class=”prettyprint”>… your code….</pre>
Done!
This is a pretty hacked-up way of getting this working, so if someone knows of proper extension that does this let me know. Otherwise this is a great duct-tape solution for your team’s development wiki (if you’re using MediaWiki anyhow 
)
Related posts:
I done this way and works very well, you can even choose the language you wanto to highlight.
I used the manual instalation, just folowed the instructions (mode 2 manual) and it was a home run!
http://www.mediawiki.org/wiki/Extension:SyntaxHighlight_GeSHi
New MediaWiki extension just released – GoogleCodePrettify.