Syntax Highlighting on Nesta

I recently went through setting up syntax highlighting on Nesta for this site. I started with Setting up rack-codehighlighter from the Nesta site, but wasn't loving what Coderay had to offer. Looking at rack-codehighlighter and it's other formatter options and decided to use Ultraviolet.

While this is geared towards Nesta, this will also work for all Rack applications, especially those built on Sinatra.

Right from the Book

If you take a look at Nesta's post, the go over this part pretty well with coderay, but that's not what I wanted. So, to get us started, I'm going to take what they have and adapt it to Ultraviolet, but with less description -- examples speak for themselves IMO.

Step 1 - Add rack-codehighlighter

In your Gemfile add

# file: Gemfile
gem 'ultraviolet', :require => 'uv'
gem 'rack-codehighlighter', :require => 'rack/codehighlighter'

and then run

$ bundle

Step 2 - Initialize rack-codehighlighter

Add the following to your config.ru

# ... omitted code above ...
use Rack::Codehighlighter,
  :ultraviolet,
  :theme => "twilight",
    # see ultraviolet's site for more theme options
  :lines => false,
  :markdown => true,
  :element => "pre>code",
  :pattern => /\A:::(\w+)\s*(\n|
)/i,
  :logging => false

require 'nesta/app'
run Nesta::App

Step 3 - Download Theme CSS

I had trouble finding a download location for these files, so I took them right from Ultraviolet's site using the following script

#!/usr/bin/env ruby
%w{
  css/sunburst.css
  css/active4d.css
  css/all_hallows_eve.css
  css/amy.css
  css/blackboard.css
  css/brilliance_black.css
  css/brilliance_dull.css
  css/cobalt.css
  css/dawn.css
  css/eiffel.css
  css/espresso_libre.css
  css/idle.css
  css/iplastic.css
  css/lazy.css
  css/mac_classic.css
  css/magicwb_amiga.css
  css/pastels_on_dark.css
  css/slush_poppies.css
  css/spacecadet.css
  css/twilight.css
  css/zenburnesque.css
}.each do |css|
  puts css
  system("curl http://ultraviolet.rubyforge.org/#{css} > uv_#{css.split("/").last.split(".").first}.scss")
end

Run with

$ ruby ./css.rb

You should have created the following files

  uv_active4d.scss
  uv_all_hallows_eve.scss
  uv_amy.scss
  uv_blackboard.scss
  uv_brilliance_black.scss
  uv_brilliance_dull.scss
  uv_cobalt.scss
  uv_dawn.scss
  uv_eiffel.scss
  uv_espresso_libre.scss
  uv_idle.scss
  uv_iplastic.scss
  uv_lazy.scss
  uv_mac_classic.scss
  uv_magicwb_amiga.scss
  uv_pastels_on_dark.scss
  uv_slush_poppies.scss
  uv_spacecadet.scss
  uv_sunburst.scss
  uv_twilight.scss
  uv_zenburnesque.scss

Note: this should be run inside your themes/THEME_NAME/views directory.

Step 4 - Import Your Theme's Style

Update your themes/THEME_NAME/views/master.sass with the following

@import "uv_twilight.scss"

Note: I had better results putting this as the last line of the file, however, it shouldn't really matter.

Step 5 - [Optional] Update Your Pages and Articles

For the best results, you'll need to tell your syntax highligher what language you're working in. To do this, updated your code samples with :::<lang>.

Ruby example

class Foo
  def bar
    "Bazinga!"
  end
end

HAML example

:::haml
%p.foo
  %b.bar
    =bazinga