How To Blog Ruby

My wish to blog about some Ruby'n'Rails stuff is coming true and Boom! there was the first issue. How to hightlight the syntax of the ruby code snippets? Gosh! But fortunately there is the SyntaxHighlighter :) based on CSS and JavaScript. Now i describe how I got it working.

I promise you, it's done in 3 steps.

Step 1

Download the SyntaxHighlighter (just follow the link above) and you should receive a lot of files.

The shCore.js and SyntaxHighlighter.css are essentially. The first one makes the code looking as the second file wants it to look like: Bling Bling.

The rest of JS pack are shBrushXXX.js files amongst others the shBrushRuby.js. Now you have to park them somewhere in the world wild web. I abused Geocities for it but Google's Sites should do the job the same. It doesn't matter. The main point is that they are available. Otherwise no Bling Bling.

To be able to highlight more kind of code like SQL, CSS, JScript or XML I uploaded the appropriate shBrushSql.js, shBrushCss.js, shBrushJScript.js and shBrushXml.js too.

Step 2

Before getting the code snippets sparkling you better should include the needed files inside the head tags as I did:

<link type="text/css" rel="stylesheet" href="http://your_server/path/to/SyntaxHighlighter.css">
<script src="http://your_server/path/to/shBrushRuby.js" language="javascript"></script>

<script src="http://your_server/path/to/shBrushSql.js" language="javascript"></script>

<script src="http://your_server/path/to/shBrushCss.js" language="javascript"></script>

<script src="http://your_server/path/to/shBrushJScript.js" language="javascript"></script>

<script src="http://your_server/path/to/shBrushXml.js" language="javascript"></script>

and before the closing body tag :

<script language='javascript'>
dp.SyntaxHighlighter.ClipboardSwf = 'http://your_server/path/to/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

Don't miss it. It's a must have.

Did you notice something? Yeah man, it's the first piece of code glitter. Calm down, the next bit is coming. Let's make the blog talk ruby in ... ...

Step 3

O.K. ruby is the first choice of talking and so we start our very first ruby snippet rrrrright now. Man, how exciting! And it's that easy.

Use the <pre> tag for wrapping the code and set the name attribute to code and the class attribute to whatever you want to look like, for example:

<pre name="code" class="ruby">
  class Person < ActiveRecord::Base
    def talk
      "Bla bla bla"
    end
  end
<pre>

which looks on your blog in real:

  class Person < ActiveRecord::Base
    def talk
      "Bla bla bla"
    end
  end

Oh gosh! How sweet! And the story goes on...

You can set some options as mentioned at the SyntaxHighlighterWiki. At the end let me give you these advises:

• Escape your HTML characters "<" and ">" by "&lt;" and "&gt;" inside the snippets
• Switch off the line breaks of your blog, otherwise you will see tons of "</br>"

So hurry up to make your own RockinRails blog look pretty!

KaBoom!!!