Monday, October 20, 2008

Ruby Syntax Highlighting in Blogger using Google syntaxhighlighter

In a previous post I used the syntax gem to get ruby syntax highlighting for this blog.

Well I just found a better way! Enter the syntaxhighlighter on Google Code.

It 100% Javascript based so there is no need to mess around with html yourself. Only drawback is that you need a place to host the files.

Getting it to work in Blogger


Go to Layout -> Edit Html and place the following right before the closing </head>.

<link href='http://.../stylesheets/syntax/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://.../javascripts/syntax/shCore.js'/>
<script language='javascript' src='http://.../javascripts/syntax/shBrushRuby.js'/>
<script language='javascript' src='http://.../javascripts/syntax/shBrushXml.js'/>
<script language='javascript' src='http://.../javascripts/syntax/shBrushJava.js'/>
and then at the bottom after the closing </body> tag add:

<script language='javascript'>
//dp.SyntaxHighlighter.ClipboardSwf = 'http://.../flash/syntax/clipboard.swf';
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
//]]>
</script>

Then in your posting you just surround the code in a pre tag with the class name set to the language you are displaying:

<pre name='code' class='ruby'>
  ...
</pre>

The html above was put in a <pre name='code' class='xml'> tag. ;) Remember to escape your opening brackets with &lt;.

Now isn't that nice.

1 comment:

kmeyer said...

What is the flash file for? It looks tricky.