Railsでmarked.jsを使用してみる

こちらの方の記事を参考に、Markdownのプレビュー機能を作成しました。
Railsにマークダウンのリアルタイムプレビューを実装する
ただ、そもそも使用しているライブラリに対する知見がないため、メモとして残したいと思います。

下記2つのライブラリを使用しておりますが、今回は marked.js に関して記載します。

• marked.js
• vue.js

なお、Ruby、Railsのバージョンは下記になります。

• Ruby 2.3.1
• Rails 5.0.0.1

公式ドキュメント

marked.js自体のドキュメントはこちら。
https://github.com/chjj/marked
marked.jsのGemのドキュメントはこちらです。
https://github.com/rosscooperman/marked-rails

インストール

Gemfileに追記し、インストールします。

Gemfile

gem 'marked-rails'

$ bundle install

application.jsに下記を追記します。
（Rails 3.1以上であれば、Asset Pipelineによって読み込めるので、個別インストールの必要はないようです。）

application.js

//= require marked

Railsへのインストールはこれで完了です。

実際に使用してみる

marked.jsの公式ドキュメントを参考に、実際に使用してみます。
適当なビューを作成し（今回はindexとします。）、下記を記載します。

index.html.erb

<div id="content"></div>
<script>
  console.log(marked('I am using __markdown__.'));
  document.getElementById('content').innerHTML =
      marked('# Marked in browser\n\nRendered by **marked**.');
</script>

すでにmarkedはGemでインストールしているので、markedメソッドが使用できます。
ブラウザで表示した結果はこちらです。

逆にmarkedメソッドがない場合は下のようになります。

document.getElementById('content').innerHTML =
      '# Marked in browser\n\nRendered by **marked**.';

Markdownはきいておらず、単なる文字列として出力されています。
いくつかMarkdownを試してみましたが、基本的なところは普通に出力できました。
日本語Markdownユーザー会

オプションについて

いくつかオプションも設定できるようです。
詳しくは調べられていないので、設定のコードを記載します。
また、ハイライトについては公式ドキュメントの例では、node-pygmentize-bundledとhighlight.jsと連携していました。

  marked.setOptions({
    // コードのハイライト（今回は割愛）
    highlight: function (code, lang, callback) {
      require('pygmentize-bundled')({ lang: lang, format: 'html' },
                                     code, function (err, result) {
        callback(err, result.toString());
      });
    },
    // Githubっぽいmd形式にするか
    gfm: true,
    // Githubっぽいmdの表にするか
    tables: true,
    // Githubっぽいmdの改行形式にするか
    breaks: false,
    // Markdownのバグを修正する？（よく分からなかったので、とりあえずdefaultのfalseで）
    pedantic: false,
    // HTML文字をエスケープするか
    sanitize: true,
    // スマートなリストにするか。pedanticと関わりがあるようなので、こちらもdefaultのtrueで。
    smartLists: true,
    // クオートやダッシュの使い方。
    smartypants: false,
  });