by Ryan Walker •

Unobtrusive code highlighting in Nesta

If you’re using Nesta, consider yourself lucky that our Markdown support comes from Maruku which extends basic Markdown. This allows us to assign arbitrary classes, ids, or other attributes on elements that plain ol’ Markdown doesn’t support.

For unobtrusive code highlighting, we take advantage of Maruku’s meta data syntax.

Choose javascript library:

I chose Google Code library. I really just wanted light syntax highlighting, keeping it as simple as possible. If you want more control over the highlighting, use Dan Webb’s library.

To add support in Nesta, I added the javascript and css files into nesta’s public directory, and added the following two HAML lines to the layout. commit

%link{ :href => "/prettify.css", :media => "screen", :rel => "stylesheet", :type => "text/css" }
%script{ :src => "/prettify.js", :type => "text/javascript" }

Then and block I want code highlighting on, I just preface it with an attribute list definition: {: .prettyprint}

{: .prettyprint}
    <ul class="contact-information">
      <%= profile_detail "Name", @candidate.name %>
      <%= profile_detail "Phone", @candidate.phone %>
    </ul>

And code is highlighted. Simple.

Filed under Content Management Ruby Sinatra