Syntax highlighting in nanoc

Enabling syntax highlighting for your nanoc-generated blog is fairly simple, and there are a few options. The option that I selected to implement syntax colouring is coderay. You can check the nanoc documentation for it here.

To install coderay:

 gem install coderay

Now that it is installed, we can use it in nanoc.

Firstly, choose which representations that you want code colouring for – and edit the compilation rules (in the Rules file) for that representation.

All you have to do is enter another filter. An example filter could be:

  filter  :colorize_syntax,
         :colorizers => { :ruby => :coderay },
         :coderay   => { :line_numbers => :list }

If you choose to pass options to the coderay colouriser, you can pass those using the :coderay => coderay_options_hash (in the example above, I've used it to pass linenumbers). You can see the options that are available by looking through the documentation for coderay.

Secondly, you must define a code element in your article/post in which you want to apply colouring to. Including a class attribute which describes the language allows coderay to colourise correctly.

  <pre><code class="language-ruby">
  </code></pre>

Finally, you must define which colours you want. You do this using CSS. Coderay wraps each token in a span, and gives that span a class attribute. To select the colours that will be used for each token, you just adjust the color for that class in CSS. I've borrowed & modified CSS that Ryan Bates used for his Railscast on Syntax Highlighting.

You can find it on the link above, or here, and I've listed it below too.

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

    /* html attribute */
    .CodeRay .an { color:#E7BE69 }
    
    /* comment */
    .CodeRay .c  { 
    color:#BC9358;
    font-style: italic; }
    
  /* escaped character */
  .CodeRay .ch { color:#509E4F }
  /* class */
  .CodeRay .cl { color:#FFF }
  /* constant */
  .CodeRay .co { color:#FFF }
  /* float */
  .CodeRay .fl { color:#A4C260 }
  /* function */
  .CodeRay .fu { color:#FFC56D }
  /* global variable */
  .CodeRay .gv { color:#D0CFFE }
  /* integer */
  .CodeRay .i  { color:#A4C260 }
  /* inline code */
  .CodeRay .il { background:#151515 }
  /* instance variable */
  .CodeRay .iv { color:#D0CFFE }
  /* doctype */
  .CodeRay .pp { color:#E7BE69 }
  /* keyword */
  .CodeRay .r  { color:#CB7832 }
  /* regex */
  .CodeRay .rx { color:#A4C260 }
  /* string */
  .CodeRay .s  { color:#A4C260 }
  /* symbol */
  .CodeRay .sy { color:#6C9CBD }
  /* html tag */
  .CodeRay .ta { color:#E7BE69 }
  /* boolean */
  .CodeRay .pc { color:#6C9CBD }

Hopefully that should be some help to those using nanoc that need a way to embed easy-to-read, useful code highlighting into their website.