Implimenting Syntax Highlighting on Instiki

Instiki is a light wiki built on Ruby On Rails, however I'm not sure if it is still be maintained. I use it to maintain a lot of ideas and examples, mostly code heavy content. One thing that could make Instiki better would be syntax highlighting -- so lets implement it.

Implementation

First off, download Syntax Highlighter by Alex Gorbatchev. Move the respective files to:

• /instiki/public/javascripts/highlighter/
• /instiki/public/stylesheets/highlighter/
• /instiki/public/flash/highlighter/

You'll need to make the 'flash' folder and the highlighter folders, but I think this keeps things organized. Now, lets open /instiki/app/views/layouts/default.rhtml and start implementing. I'm not entirely sure how/where all the javascript is being rolled into the main template page of Instiki, so instead of tracking that down we can just put some good ol' fashioned <style></style> links. Right after <%= javascript_include_tag :defaults %> put:

	<link type="text/css" rel="stylesheet" href="/stylesheets/highlighter/SyntaxHighlighter.css"></link>
	
	<script type="text/javascript" src="/javascripts/highlighter/shCore.js"></script>
	<script type="text/javascript" src="/javascripts/highlighter/shBrushCss.js"></script>
	<script type="text/javascript" src="/javascripts/highlighter/shBrushJScript.js"></script>
	<script type="text/javascript" src="/javascripts/highlighter/shBrushXml.js"></script>
	<script type="text/javascript" src="/javascripts/highlighter/shBrushVb.js"></script>

Now I only added the few language files that I needed -- You, of course, should link to whichever ones you need. At the bottom of default.rhtml, right above </body> put:

	<script language="javascript">
		dp.SyntaxHighlighter.ClipboardSwf = '/flash/highlighter/clipboard.swf';
		dp.SyntaxHighlighter.HighlightAll('code');
	</script>

Usage

Using a <pre> tag, set name attribute to code and class attribute to the language of your choosing.

<pre name="code" class="js">
... some code here ...
</pre>

For the full run down of it's usage and options, check out the project page.

Languages

Language	Class Name(s)
C++	cpp, c, c++
C#	c#, c-sharp, csharp
CSS	css
Delphi	delphi, pascal
Java	java
Java Script	js, jscript, javascript
PHP	php
Python	py, python
Ruby	rb, ruby, rails, ror
Sql	sql
VB	vb, vb.net
XML/HTML	xml, html, xhtml, xslt

Caveat

The name attribute on a <pre> tag is not valid XHTML.