Getting CodeMirror to Work With Ruby on Rails

codemirrorI’m in the process of building a pattern library at my current job. Keeping with the culture of the company, I’m building the library on Rails, using Sass and Haml to expedite the code writing. Part of the library needs to show code snippets, so to do this, I needed pretty output for the Haml source code I wanted to show. Basically, I didn’t want to settle for outputting code using <pre> and <code>.

Enter CodeMirror. CodeMirror is an in-browser editor that enables you to display source code with much of the power and theming capabilities of a full-blown editor. For my purposes, I just want it to show code coloring and line numbers.

Integrating CodeMirror with a Rails application is a fairly painless process. Fortunately, there’s a gem in existence. Install the gem or add it to your Gemfile.

gem "codemirror-rails"

This gem adds all of the CodeMirror JavaScript and CSS assets to your Rails project. The next step is to ensure these dependencies are loaded. Since I’m using Haml, I’m going to load all of the necessary dependencies required for that particular language.

In application.js, add these dependencies:

//= require codemirror
//= require codemirror/modes/xml
//= require codemirror/modes/htmlmixed
//= require codemirror/modes/javascript
//= require codemirror/modes/ruby
//= require codemirror/modes/haml

The mode dependencies will rely on what you’re trying to show. Haml requires XML, HTMLMixed, JavaScript, Ruby, and Haml modes to work correctly.

Make sure you also load the CSS dependency into your application.css file (or application.css.scss):

//= require codemirror

Next, we need to add a place for CodeMirror to render. This is done using a textarea. In my case, I need the textarea to have a pre-existing entry, and since I’m using Haml, that presents a new issue. How can I prevent the Haml code from rendering? That’s where the preserve filter comes into play.

%textarea#code{:name => "code"}
  :preserve
    // This is a four column grid 
    // Assign class names to the row element to achieve specificity

    .row.grid-haml-example.clearfix
      .large-4.columns
        %span 1 / 3
      .large-4.columns
        %span 1 / 3
        .row
          .large-6.columns
            Nested Column
          .large-6.columns
            Nested Column
      .large-4.columns
        %span 1 / 3

Going back to our application.js file, we need to initialize CodeMirror. Per the CodeMirror manual, the script can be invoked with a variety of arguments:

$("textarea").each(function() {
    CodeMirror.fromTextArea($(this).get(0), {
      lineNumbers: true,
      mode: "text/x-haml"
    });
  });

I’ve customized my version of the code using jQuery. Since I have some pages that have multiple CodeMirror textareas, I need to use jQuery to loop through each textarea instance. I then pass the textarea’s class to CodeMirror using $(this).get(0). The arguments I’ve set for CodeMirror ensures I have line counts visible on the left margin and sets CodeMirror to text/x-haml mode.

That’s it! CodeMirror can be configured to work with an array of different languages. It’s a pretty powerful tool, especially for clearly showing markup and syntax.

Have a question or comment about this post? Drop me a line!