2008-03-19 00:55 UTC Syntax highlighting in Ruby

Posted in: , , ,
I love syntax highlighting - I have gotten so dependent on it I find it painful to use editors without it. So it's extremely annoying to post code snippets without it online too.

Thankfully it's trivially simple to do in Ruby. For this blog I really wanted a solution that lets me keep the text clean in the database, but marks up the posts when rendering, so after some searches I ended up doing this:

gem install hpricot
gem install syntax

Then I added this:

require 'hpricot'               
require 'syntax/convertors/html'

def filter_content(content) h = Hpricot(content) c = Syntax::Convertors::HTML.for_syntax "ruby" h.search('//pre[@class="ruby"]') do |e| e.inner_html = c.convert(e.inner_text,false) end h.to_s end

Then all I need to do is call filter_content() with the post content, and put any code in pre tags with class="ruby".

(Hpricot is a great tool btw - I use it all over the place for mangling HTML.)

The remaining piece is just some CSS. The CSS was adapted from CSS found here, but I ended up changing most of the colors to match my editor settings better:

pre { background: #111122; padding: 10px; color: #228822; }
.ruby .normal { color: #fff; }
.ruby .comment { color: #005; font-style: italic; }
.ruby .keyword { color: #A44; font-weight: bold; }
.ruby .method { color: #44f; }
.ruby .class { color: #0c4; }
.ruby .module { color: #050; }
.ruby .punct { color: #668; font-weight: bold; }
.ruby .symbol { color: #ff0; }
.ruby .string { color: #4f4; }
.ruby .char { color: #F07; }
.ruby .ident { color: #fff; }
.ruby .constant { color: #0c4; }
.ruby .regex { color: #B66; background: #FEF; }
.ruby .number { color: #F99; }
.ruby .attribute { color: #fc4; }
.ruby .global { color: #7FB; }
.ruby .expr { color: #227; }
.ruby .escape { color: #277; }



Comments - Newest first

2009-08-19 07:23 UTC
Good write-up, but there are some really robust syntax highlighting solutions available for ruby and rails. I just did a whole write-up on them:

http://doblock.com/articles/a-whistle-stop-tour-of-syntax-highlighting-and-markdown-solutions-for-rails

I hope you find it useful. Thanks again.

2008-10-22 08:51 UTC
That's true, it's a big advantage if you have a system where you want to generate the presented code on the fly. But for something more static I think it might be the perfect solution.
2008-10-11 14:24 UTC
Vidar Hokstad
Lots of editors have that, but it has the huge disadvantage that you mess with the content, and if you want to/need to tweak the highlighting you will need to rerun it for each bit of code you run. Doing the highlighting when presenting the code means any changes you do gets applied immediately across all posts.

2008-10-10 17:31 UTC
Thanks for the post. I just found out that - if you're using TextMate as your editor, you can use the builtin 'convert document to HTML' function, as described here: http://blog.andischacke.com/2008/10/code-syntax-highlighting-on-web-pages.html

Post a Comment

Basic HTML allowed. Javascript required for anti-spam check (I am testing a new anti-spam measure. Problems commenting? Please e-mail me: vidar@hokstad.com)

About me

E-mail: vidar@hokstad.com Skype: vhokstad
Twitter: vhokstad
View my LinkedIn profile.

I was born April 21st, 1975, in Oslo, Norway. Since 2000 I've been living in London, UK. I'm married and we just had our first child, Tristan Ikemefuna Hokstad.

I'm working for Aardvark Media as Director of Technology. I'm also currently on the board of SpatialQ, a startup in the GIS space, and an advisor to Skoach, a startup doing a time management app for people with ADD.

Twitter Updates

    follow me on Twitter