Style CodeMirror as a Twitter Bootstrap input

I'm using Rails 3.2 to do this. I have the LESS version of the rails-twitter-bootstrap gem installed and have created a custom less stylesheet in my app/assets/stylesheets directory. This is then included from the bootstrap_and_overrides.css.less file. Be sure to turn off including the entire tree in your application.css manifest so that this file doesn't get included twice (with associated errors).

Give the textarea that you're replacing with CodeMirror the codemirror class name.

Within: bootstrap_and_overrides.css.less

@import "codemirror_bootstrap.css.less";

Within: codemirror_bootstrap.css.less

textarea.codemirror {
  height: 310px;
}

.CodeMirror {
  padding: 4px 6px;
  font-size: @baseFontSize;
  .border-radius(@inputBorderRadius);
  vertical-align: middle;
  background-color: @inputBackground;
  border: 1px solid @inputBorder;
  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
  .transition(~"border linear .2s, box-shadow linear .2s");

  // Focus state
  &.CodeMirror-focused {
    border-color: rgba(82,168,236,.8);
    outline: 0;
    outline: thin dotted \9; /* IE6-9 */
    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");

    .error & {
      border-color: darken(@errorText, 10%);
      @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@errorText, 20%);
      .box-shadow(@shadow);
    }
  }

  .error & {
    border-color: @errorText;
  }
}

All of these styles are pulled from the Twitter Bootstrap less stylesheets. Future versions of Bootstrap might change these styles but for now they work.