Code Syntax Highlighting

17 Oct 2008

Having just implemented code syntax highlighting in this blog in addition to Textile formatting, I thought I’d share how I did it.

After a little research, I decided that Arya Asemanfar’s tm_syntax_highlighting plugin looked the most promising. Arya’s blog post about it was particularly helpful.

Prerequisites

Install the oniguruma system library (see link in the plugin README).

Install the ultraviolet gem, which will also install the textpow and oniguruma gems.

sudo gem install ultraviolet

1. Install the Plugin

./script/plugin install git://github.com/arya/tm_syntax_highlighting

2. Copy all themes from ultraviolet:

./script/generate syntax_css

3. Create defaults initializer

# config/initializers/tm_syntax.rb  
TmSyntaxHighlighting.defaults = {:theme => "mac_classic", :line_numbers => false, :lang => "ruby"}  

4. Create an application helper method to parse the Textile and code:

Note: I have used “c0de” instead of “code” here just to enable this code to be parsed!

# app/helpers/application_helper.rb  
def parse_textile_and_code_syntax(text)  
  text_pieces = text.split((<c0de>|<c0de lang="[A-Za-z0-9_-]+">|<c0de lang='[A-Za-z0-9_-]+'>|<\/c0de>)/)  
  in_pre = false  
  language = nil  
  text_pieces.collect do |piece|  
    if piece =~ /^<c0de( lang=(["’\])?(.*)\2)?>$/  
      language = $3  
      in_pre = true  
      nil  
    elsif piece == "</c0de>"  
      in_pre = false  
      language = nil  
      nil  
    elsif in_pre  
      code(piece.strip, :lang => language, :theme => "mac_classic")  
    else  
      RedCloth.new(piece.strip).to_html  
    end  
  end  
end  

5. Use the helper in the views

parse_textile_and_code_syntax(@blog_post.post) %>

6. Add CSS for horizontal scrolling

pre {  
  margin: 10px 10px;  
  padding: 10px 10px;  
  line-height: 15px;  
  overflow: auto;  
  font-family: "Monaco", "Courier New", courier;  
  font-size: 12px;  
}  

Other posts

Previous post: Automated Testing

More recently: Dynamic CSS with Rails