MediaWiki: Formating and colouring Code

Tuesday, February 20, 2007

technology01.pngMediaWiki 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:
Just before the closing tag:

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).

Add the following line to the end of your LocalSettings.php file, right before the closing ?> tag.

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:

Will display as:

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

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

2 Comments Add your own

  • 1. Bryn Thomas  |  March 29th, 2008 at 9:41 am

    Thanks a lot for putting this up, I’ve added it to my own wiki and it worked brilliantly (just had to change a bit of the code for the new version of dp syntaxhighlighter). It also shows nicely just how simple it is to write extensions for MediaWiki.

  • 2. Santiago  |  December 4th, 2008 at 2:25 am

    Hi! I got some problems trying to start this up in my wiki, Probably ’cause of that changes Bryn talked about. I get this error : dp is not defined index.php?title=EDITOR&action=edit()()index.ph…tion=edit (lĂ­nea 295) [Break on this error] dp.SyntaxHighlighter.HighlightAll(‘code’); Could you help me? thank you very much for your effort!

Leave a Comment

(Will not be shown)
Notify me of follow-up comments via e-mail

Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Trackback this post  |  Subscribe to the comments via RSS Feed


about

Renaud This is a simple technical weblog where I dump thoughts and experiences from my computer-related world.
It is mostly focused on software development but I also have wider interests and dabble in architecture, business and system administration.
More About me…

My StackOverflow Profile
My (sporadically active) StackOVerflow account

Most Recent Posts

Categories

Links