Rails 5 blog with Coderay syntax highlighter

If you have a Rails blog, there are many choices available for syntax highlighting to make your code more visually interesting. Coderay has been around a while and is very good at syntax highlighting for the two dozen or so input languages it supports. Ryan Bate's excellent Railcast of 2010 is a bit out-dated in a couple of respects, but the essentials are still valid. I'll demonstrate a quick implementation for the current Rails 5.

First, I'll assume you have a basic Rails blog app up and running. We'll need to add the Coderay gem to the Gemfile.

    gem 'coderay', '~> 1.1', '>= 1.1.1'

Now install the gem.

    bundle install

Now let's go to our views and add a helper method which will call Coderay. We'll call the helper method, surprisingly enough, coderay.

    # app/views/articles/show.html.erb

    <%= coderay(@article.body).html_safe %>

Now let's put in our helper method. This method is available from several places on the web, but I'll explain what's going on.

    # app/helpers/application_helper.erb

    def coderay(text)
    text.gsub(/\<code( lang="(.+?)")?\>(.+?)\<\/code\>/m) do
      CodeRay.scan($3, $2).div(:css => :class)
    end
  end

The highlghted portion of the gsub method is scanning the document for (1) code tags with the lang attribute. If the code tag does not have a lang attribute, Coderay will cause Rails to throw an error. And (2), it's looking for the text within the code tags. These values are held in the (.+?) regex notation.

On the second line of the method, Coderay is called where $3 is a variable referencing the text matched in the gsub method and $2 referencing the lang attribute, which determines the language in which your code will be styled.

There are different methods for displaying the code. In this case, I've called the div(:css => :class) method, which will display the css by class. See thedocumentation for more options.

Finally, we need to add our CSS stylesheet and then we'll be ready to go. A web search of default Coderay stylesheets will give you a starting place for customization. Make a coderay.css stylesheet and add it to your app/assets/stylesheets folder. For this blog I've chose the following:

    #app/assets/stylesheets/coderay.css.scss

  .CodeRay {
  font-family: 'Courier New', 'Terminal', monospace;
  color: #E6E0DB;
  overflow: auto;
  font-size: 12px;
  margin: 12px 0;
    pre {
      margin: 0px;
      padding: 0px;
      border: 1px solid black;
      padding: 3px 5px;
    }
  }
div.CodeRay {
}
span.CodeRay { white-space: pre; border: 0px; padding: 2px }

table.CodeRay { border-collapse: collapse; width: 100%; padding: 2px }
table.CodeRay td {
  padding: 1em 0.5em;
  vertical-align: top;
}

.CodeRay .line-numbers, .CodeRay .no {
  background-color: #ECECEC;
  color: #AAA;
  text-align: right;
}

.CodeRay .line-numbers a {
  color: #AAA;
}

.CodeRay .line-numbers tt { font-weight: bold }
.CodeRay .line-numbers .highlighted { color: red }
.CodeRay .line { display: block; float: left; width: 100%; }
.CodeRay span.line-numbers { padding: 0px 4px }
.CodeRay .code { width: 100% }

ol.CodeRay { font-size: 10pt }
ol.CodeRay li { white-space: pre }

.CodeRay .code pre { overflow: auto }
.CodeRay .debug { color:white ! important; background:blue ! important; }

.CodeRay .annotation { color:#007 }
.CodeRay .attribute-name { color:#f08 }
.CodeRay .attribute-value { color:#700 }
.CodeRay .binary { color:#509; font-weight:bold }
.CodeRay .comment  { color:#998; font-style: italic;}
.CodeRay .char { color:#04D }
.CodeRay .char .content { color:#04D }
.CodeRay .char .delimiter { color:#039 }
.CodeRay .class { color:#458; font-weight:bold }
.CodeRay .complex { color:#A08; font-weight:bold }
.CodeRay .constant { color:teal; }
.CodeRay .color { color:#0A0 }
.CodeRay .class-variable { color:#369 }
.CodeRay .decorator { color:#B0B; }
.CodeRay .definition { color:#099; font-weight:bold }
.CodeRay .directive { color:#088; font-weight:bold }
.CodeRay .delimiter { color:black }
.CodeRay .doc { color:#970 }
.CodeRay .doctype { color:#34b }
.CodeRay .doc-string { color:#D42; font-weight:bold }
.CodeRay .escape  { color:#666; font-weight:bold }
.CodeRay .entity { color:#800; font-weight:bold }
.CodeRay .error { color:#F00; background-color:#FAA }
.CodeRay .exception { color:#C00; font-weight:bold }
.CodeRay .filename { color:#099; }
.CodeRay .function { color:#900; font-weight:bold }
.CodeRay .global-variable { color:teal; font-weight:bold }
.CodeRay .hex { color:#058; font-weight:bold }
.CodeRay .integer  { color:#099; }
.CodeRay .include { color:#B44; font-weight:bold }
.CodeRay .inline { color: black }
.CodeRay .inline .inline { background: #ccc }
.CodeRay .inline .inline .inline { background: #bbb }
.CodeRay .inline .inline-delimiter { color: #D14; }
.CodeRay .inline-delimiter { color: #D14; }
.CodeRay .important { color:#f00; }
.CodeRay .interpreted { color:#B2B; font-weight:bold }
.CodeRay .instance-variable { color:teal }
.CodeRay .label { color:#970; font-weight:bold }
.CodeRay .local-variable { color:#963 }
.CodeRay .octal { color:#40E; font-weight:bold }
.CodeRay .operator { }
.CodeRay .predefined-constant {  font-weight:bold }
.CodeRay .predefined { color:#369; font-weight:bold }
.CodeRay .preprocessor { color:#579; }
.CodeRay .pseudo-class { color:#00C; font-weight:bold }
.CodeRay .predefined-type { color:#074; font-weight:bold }
.CodeRay .reserved, .keyword  { color:#000; font-weight:bold }

.CodeRay .key { color: #808; }
.CodeRay .key .delimiter { color: #606; }
.CodeRay .key .char { color: #80f; }
.CodeRay .value { color: #088; }

.CodeRay .regexp { background-color:#fff0ff }
.CodeRay .regexp .content { color:#808 }
.CodeRay .regexp .delimiter { color:#404 }
.CodeRay .regexp .modifier { color:#C2C }
.CodeRay .regexp .function  { color:#404; font-weight: bold }

.CodeRay .string { color: #D20; }
.CodeRay .string .string { }
.CodeRay .string .string .string { background-color:#ffd0d0 }
.CodeRay .string .content { color: #D14; }
.CodeRay .string .char { color: #D14; }
.CodeRay .string .delimiter { color: #D14; }

.CodeRay .shell { color:#D14 }
.CodeRay .shell .content { }
.CodeRay .shell .delimiter { color:#D14 }

.CodeRay .symbol { color:#990073 }
.CodeRay .symbol .content { color:#A60 }
.CodeRay .symbol .delimiter { color:#630 }

.CodeRay .tag { color:#070 }
.CodeRay .tag-special { color:#D70; font-weight:bold }
.CodeRay .type { color:#339; font-weight:bold }
.CodeRay .variable  { color:#036 }

.CodeRay .insert { background: #afa; }
.CodeRay .delete { background: #faa; }
.CodeRay .change { color: #aaf; background: #007; }
.CodeRay .head { color: #f8f; background: #505 }

.CodeRay .insert .insert { color: #080; font-weight:bold }
.CodeRay .delete .delete { color: #800; font-weight:bold }
.CodeRay .change .change { color: #66f; }
.CodeRay .head .head { color: #f4f; }

Now the code displayed in your blog will be nice and colorful.