How-to: Add Code Syntax Highlighting to MediaWiki
Published Tue, 6 Apr 2010 • 2 comments
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 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>
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 :P )
About the Author
Richard Nichols is an Australian software engineer with a passion for making things.
You might also enjoy reading -
- 301 Redirects Made Easy In Java
- Add Package (or Class) Filtering To Your Findbugs Ant Task
- Unfortunately Interesting Java Generics
- Arrrggh! java.security.cert.CertificateException: Certificates does not conform to algorithm constraints
- Netbeans code template for SLF4J logging