Colorful Ruby Code In HTML Using CodeRay

In this blog post I will demonstrate a quick and easy way I have found to syntax highlight your Ruby code in pretty colors for your blog posts or other HTML-based display purposes. Please note, this blog post is designed for use with color monitors only, obviously.

The focus of this post is Ruby, but this method also applies for syntax highlighting C, C++, Python, CSS, Clojure, diff, Groovy, HAML, ERB, Java, JavaScript, PHP, SQL, XML and YAML.

What’s Wrong With Good Ol’ Black and White?

Here is some arbitrary code in app/controllers/home_controller.rb

class HomeController < ApplicationController

  FEATURE_ICONS_DIRECTORY = File.join(::Rails.root, "public/img/feature-icons")

  def index
    # Find all the images in the "feature-icons" directory, strip off
    # the directory and extension, to just leave a list of icon names
    @feature_names =
      Dir.entries(File.join(FEATURE_ICONS_DIRECTORY)).
        reject { |f| ! f.end_with? ".png" }.
        map    { |f| f.split(".")[0] }.
        sort
  end
end

Yawn. So black and white. So hard to read. Would it not be great if we could display this in color?

Here is how you can convert this code to color…

Install the CodeRay gem

First we need to install the CodeRay gem.

gem install coderay

Colorize That Code

The CodeRay gem is very feature rich, but here is a simple out-the-box example that will colorize our code for syntax highlighting…

ruby -e '
    require "coderay";
    filename = "app/controllers/home_controller.rb";
    print CodeRay.scan_file(filename).div
'

This example will output HTML with inline CSS. This is a good quick and dirty way to get to colorized code, but your front-end CSS person, who likes clean HTML, will probably hate you. Replacing the “.div” with “.html” will not include the CSS and it will be up to you to provide the style for the CSS classes.

Take It Out Of The Oven

Here is what the colorized code will look like on your blog, webpage or presentation…

class HomeController < ApplicationController

  FEATURE_ICONS_DIRECTORY = File.join(::Rails.root, "public/img/feature-icons")

  def index
    # Find all the images in the "feature-icons" directory, strip off
    # the directory and extension, to just leave a list of icon names
    @feature_names =
      Dir.entries(File.join(FEATURE_ICONS_DIRECTORY)).
        reject { |f| ! f.end_with? ".png" }.
        map    { |f| f.split(".")[0] }.
        sort
  end
end

And there it is. Not much more to say about that other than how easy it was. Although it was easy the CodeRay gem is very rich.

Resources

• CodeRay Official Website
• CodeRay on GitHub
• More CodeRay examples (1470 of them!)

Comments