Railsでマークダウン用エディタを導入(pagedown-bootstrap-rails)

現在rails4.2.3でローカル環境で開発中です。
簡単なブログ的な機能にマークダウン用エディタを実装(teratailみたいな感じ)しようと試みております。

そこで今回簡単にrailsに導入できると書かれていたpagedown-bootstrap-railsというgemを使って実装してみました。

ですが、実装がなかなかうまくできず下記の画像のように入力フォームしか生成されません。

![]

実装後の姿としてはこちらの画像のようにしたいと思っています。

今回実装するために記述したコード類はこちらです。
インストールしたgem

gem 'bootstrap-sass'
gem 'font-awesome-rails'
gem 'simple_form'
gem 'pagedown-bootstrap-rails'

application.css

省略
/*= require pagedown_bootstrap */

application.js

省略
//= require pagedown_bootstrap
//= require pagedown_init

app/inputs/pagedown_input.rb

class PagedownInput < SimpleForm::Inputs::TextInput
  def input(wrapper_options)
    out = "
\n"
    html_options = input_html_options.merge(class: 'wmd-input', id: "wmd-input-#{attribute_name}")
    out << "#{@builder.text_area(attribute_name, merge_options(html_options, wrapper_options)) }"
    if input_html_options[:preview]
      out << "
"
    end
    out.html_safe
  end

  private

  def merge_options(html_opts, wrapper_opts)
    html_opts.merge(wrapper_opts) { |_key, first, second| first + ' ' + second }
  end
end

markdown_apis.coffee

$ ->
    $('textarea.wmd-input').each (i, input) ->
      attr = $(input).attr('id').split('wmd-input')[1]
      converter = new Markdown.Converter()
      Markdown.Extra.init(converter)
      help =
        handler: () ->
          window.open('http://daringfireball.net/projects/markdown/syntax')
          return false
        title: "<%= I18n.t('components.markdown_editor.help', default: 'Markdown Editing Help') %>"
      editor = new Markdown.Editor(converter, attr, help)
      editor.run()

views/words/new.html.erb

<%= simple_form_for(@word) do |f| %>
  <%= f.input :title, as: :pagedown, input_html: { preview: true, rows: 20 } %>
  <br>
  <%= f.submit %>
<% end %>

今回、実装するにあたり参考にしたサイトは
pagedown-bootstrap-rails
railsに導入できるMarkdown用エディタの紹介
この２つのサイトを参考に実装しましたが、どこを修正すればいいのか分からないため、何かアドバイスなどご教授頂けると助かります。

また、マークダウンを導入する場合はもっと違うgemを使用した方がいいとうご意見などもございましたら教えて頂けると嬉しいです。

よろしくお願いします。