atom thoughts

NOTE: This blog is no longer running Typo

In this article I am going to discuss the steps necessary to add the excellent CodeRay syntax
highlighting library to your Typo blog installation. The newest version of Typo ships with
support for the syntax gem, but I have found that the
CodeRay gem does a much better job and supports a lot more languages including:

• ruby
• C
• Delphi
• HTML
• RHTML
• Nitro-XHTML

Install CodeRay

There are a couple different ways you can install CodeRay:

• By gem
• In the typo/vendor directory.

For my case, I chose to install CodeRay using the vendor directory since the gem way
is not ideal for a shared hosting environment.

To install CodeRay into your typo/vendor directory:

# Either download the CodeRay source into your typo/vendor/coderay directory or setup
an svn:externals for CodeRay. To setup the svn:externals, type this from the root
of your typo install:

svn propedit svn:externals vendor

and add this line into the externals for the vendor directory:

coderay svn://rubyforge.org/var/svn/coderay/trunk/coderay/trunk/lib

and then update your CodeRay src with this command:

svn up vendor

Create the CodeRay text filter

Now we will create a custom Typo text filter for sending code through CodeRay.

NOTE: This requires either Typo 4 or greater, or an earlier unreleased Typo that supports
text filters.

If you want to skip the explanation, here is a patch file
that you can apply from the root of your typo installation:

patch < typo.coderay.diff

This diff contains the following four changes:

• A modification to the typo environment
• A CodeRay text filter
• A CodeRay css stylesheet
• A modification to the add the CodeRay stylesheet to the typo theme

A modification to the typo environment

In order to have typo load the CodeRay code into our rails environment, we needed to add
the vendor/coderay path into the config load paths. The patch will do this for you.

A CodeRay text filter

The CodeRay text filter is very similar to the Code text filter. It is impressive how
little code it takes to add this CodeRay functionality into typo. All of the work for this
text filter is done in this method:

def self.macrofilter(controller,content,attrib,params,text='')
  lang = attrib['lang'] || 'ruby'
  tokens = CodeRay.scan(text, lang)
  result = tokens.div(:line_numbers => :table)
  '<notextile>#{result}</notextile>'
end

A CodeRay css stylesheet

After applying the patch, the CodeRay css file will be located here:

public/stylesheets/coderay.css

A modification to the add the CodeRay stylesheet to the typo theme

The patch above will apply the CodeRay css to the default azure theme. You can manually
add it to any theme by just adding this line to the top of your theme within the tags:

<%= stylesheet_link_tag "/stylesheets/coderay", :media => ‘all’ %>

Using the CodeRay text filter

To use the CodeRay text filter in your code, surround any code you wish to display in
typo:coderay tags and optionally specify the language to format (the default is ruby).
Here is a simple example (Note: remove the space between typo and coderay, I only added it so it would not be grabbed by the coderay text filter):

  <typo: coderay lang="html">
    <div id="somediv">The div that I am</div>
  </typo: coderay>