codemirror-rails を使おうとして苦戦したこと

http://codeshare.io/を久しぶりに使ってみて
似たようなWebアプリを作ってみたい欲に駆られたので、
ソースを見ていたらCodeMirrorというものを使ってるらしいということがわかった

CodeMirrorとは

JavaScriptライブラリで、シンタックスハイライトやオートインデント、
行番号表示などコードエディタとして必要な機能を一通り揃えており、対応言語も多数ある模様。
また、アドオンを導入することで括弧の補完やハイライト、Ctrl+Spaceでコードの自動補完などの機能を持たせることもできる。
あと他ライブラリに非依存なので導入しやすい。

Rails上でもcodemirrorは使えるらしいので、早速使ってみることに。
まさかここから戦うことになるとは思うまい…

github.com

Getting started通りに進めていく...もエラー発生
f:id:K396_109:20151128160652p:plain

( ・`ω・´) < CodeMirrorなんてねえです!!!

このエラーに丸1日悩まされました。

解決法

apprication.js

// = require codemirror

footer_javascript

# = require codemirror/modes/coffeescript

myTextArea = document.getElementById('code')
editor = CodeMirror(((elt) ->
  myTextArea.parentNode.replaceChild elt, myTextArea
  return
),
  value: myTextArea.innerHTML
  mode: 'coffeescript'
  styleActiveLine: true
  theme: 'monokai'
  lineNumbers: true
  tabSize: 2
)

(application.cssは変更なし)

header_javascript と footer_javascript で CodeMirror を呼び出してあげて、
valueをちゃんと指定してあげたらエラーなく動くことができました

以上。

Herokuで公開してます(CoffeeScript対応)
https://viewcode.herokuapp.com/tutorial/index