Posted at

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

More than 1 year has passed since last update.

こちらの方の記事を参考に、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メソッドが使用できます。

ブラウザで表示した結果はこちらです。

スクリーンショット 2017-02-07 11.52.52.png

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

document.getElementById('content').innerHTML =

'# Marked in browser\n\nRendered by **marked**.';

スクリーンショット 2017-02-07 11.56.27.png

Markdownはきいておらず、単なる文字列として出力されています。

いくつかMarkdownを試してみましたが、基本的なところは普通に出力できました。

日本語Markdownユーザー会


オプションについて

いくつかオプションも設定できるようです。

詳しくは調べられていないので、設定のコードを記載します。

また、ハイライトについては公式ドキュメントの例では、node-pygmentize-bundledhighlight.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,
});