Nesta CMS

A Ruby CMS. Built with Sinatra.

Setting up rack-codehighlighter

If you write about software, you can make code look more attractive by
adding syntax highlighting to your pages. Nesta is a Sinatra app (and is
therefore built on top of Rack), which makes it easy to setup syntax
highlighting with the rack-codehighlighter gem.

Installing the gem

Before you can highlight any code, you've got a decision to make. There
are several highlighting libraries available to you

Add the rack-codehighlighter gem and your preferred highlighting
library (I'm using coderay in this example) to your Gemfile and run
bundle:

The :element and :markdown options that I've set in this example
work well if your content is written in Markdown; if you're using
Textile you'll want to tweak the setting (see the README).

Now start your app up in development mode, add a block of source code to
one of your web pages, and tell the highlighter what syntax it is.
Something like this should do it:

:::ruby
def hello
puts "Hi!"
end

Reload the page. If :::ruby has been removed from the HTML then the
highlighter is working -- if you look at the source you'll see that your
code has been wrapped in span tags.

Now you need some CSS to make it look pretty.

Adding some colour

If you've decided to use Ultraviolet it looks as though you can choose a
theme and tell Rack::Codehighlighter to deal with it for you. I haven't
investigated that yet -- see the README for notes on Ultraviolet.

CSS styles for Coderay

If you're using Coderay you'll need to provide your own CSS. I'm too
lazy for that, but luckily some kind souls have shared their CSS with
the rest of us. I like the GitHub styles and the RailsCasts
colours.

Update: Since I first wrote this article, coderay appears to have
updated the CSS class names that it uses to highlight code, and those
themes don't work any more. If you'd like to use them, make sure that
you tell Bundler to load an earlier version of coderay (I'm using
0.9.8 successfully, and I'm not sure when the CSS class names were
changed).

If you're using a Nesta theme...

Themes load their CSS from their own views folder (e.g.
themes/slate/views), but if you put a stylesheet in your site's
views folder Nesta will load that instead.

So we're going to pull a neat trick, and get Sass to include our
stylesheet at the end of the theme's default CSS. Start by making a copy
of the theme's Sass file: