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/
/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
Thename attribute on a <pre> tag is not valid XHTML.
Posted by on 03/06 at 10:05 AM
Next entry: Creating Google Reader Interface from Scratch; but Stuck on a Bug
Previous entry: Coffee = Yummy