JQueryとmark.jsでマークダウンのリアルタイムプレビューをつくる

1 はじめに
- 1.1 環境
2 mark.js
3 プレビュー機能
4 さいごに

はじめに

マークダウンのリアルタイムプレビュー機能を作ってみたいと思い、こちらの方の記事を参考にさせていただきました。

Railsにマークダウンのリアルタイムプレビューを実装する

ただ、そもそも使用しているライブラリ、およびJSに対する知見がないため、メモとして残したいと思います。

記事の中では下記2つのライブラリを使用していらっしゃいます。

marked.js
vue.js

後述しますが、vue.jsはJavaScriptの軽量フレームワークのようなので、代わりにJQueryで実装しました。

環境

Ruby 2.3.1
Rails 5.0.0.1
JQuery 1.12.4

mark.js

公式ドキュメント

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

インストール

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

gem 'marked-rails'

1	gem 'marked-rails'

$ bundle install

1	$ bundle install

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

//= require marked

1	//= require marked

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

実際に使用してみる

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

<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>

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**.';

1 2	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,
});

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,

});

プレビュー機能

vue.jsに関して

参考にさせていただいた記事では、vue.jsでプレビュー部分を作成していました。

私自身に知識がなかっただけなのですが、vue.jsはフレームワークでした。
他のフレームワーク（ReactやAngular）と比べ、軽量で、View層にだけ焦点を当てている分導入コストが低い、とのことです。
詳しくはドキュメントをご参照ください。
vue.jsのドキュメント

とはいえ、フレームワークであるならば、ふつうにJavaScriptやJQueryを使ってできるだろうと思い、勉強がてら作成してみました。

JQueryで書いてみたコード

とはいえ、JQueryもそこまでゴリゴリ書けるわけではないので、下記サイト様を参考にさせていただきました。
jQueryで色々なフォーム入力値をリアルタイム取得する

まずはビューのHTMLです。
Railsのscaffoldで作成されるフォームを少し修正したくらいです。

<form>
  <%= form_for @post, :url => {:action => :create} do |f| %>
    <div class="form-group">
      <%= f.text_field :title , class: 'form-control', placeholder: 'タイトルを入力してください'%>
    </div>
    <div class="form-group">
      <div id='editor'>
        <textarea name="post[content]" class="form-control" rows="20"></textarea>
        <div id="marked-area"></div>
      </div>
    </div>
  <% end %>
</form>

<form>

<%= form_for @post, :url => {:action => :create} do |f| %>

<%= f.text_field :title , class: 'form-control', placeholder: 'タイトルを入力してください'%>

</div>

</div>

<% end %>

</form>

続いて、Javascript（JQuery）側です。
最終的にはマークダウン出力したいので、関数名はreplaceMarkdownとなっています。

$(function() {
  $("#editor textarea").each(function () {
    $(this).bind('keyup', replaceMarkdown(this));
  });


  function replaceMarkdown(elm) {
    var v, old = elm.value;
    return function () {
      if (old != (v = elm.value)) {
      old = v;
      str = $(this).val();
      $("#marked-area").html(str);
      }
    }
  }
});

$(function() {

$("#editor textarea").each(function () {

$(this).bind('keyup', replaceMarkdown(this));

});

function replaceMarkdown(elm) {

var v, old = elm.value;

return function () {

if (old != (v = elm.value)) {

old = v;

str = $(this).val();

$("#marked-area").html(str);

}

});

JSのコードに関して

まずは、対象のtextareaに関してkeyupイベントと関数をバインドさせます。
keyupはキーボードのキーが押され、上がった際に呼び出されます。
JQuery 日本語リファレンス -keyup-

keyupされたタイミングでreplaceMarkdownを呼びます。

ここで詰まったことが、この変数の宣言です。
参考にさせていただいたサイト様にてこの宣言をしておりました。

var v, old = elm.value;

1	var v, old = elm.value;

勝手に勘違いしておりまして、v = old = elm.valueで読み進めておりました。
JQueryでは変数をこのように宣言できます。
（どうりでページロード時にvを出力させるとundefinedになるわけです。。。）

var v;
var old = elm.value;
// ↓
var v, old = elm.value;

var v;

var old = elm.value;

// ↓

var v, old = elm.value;

jQueryを読むために知っておきたい6つの知識

あとはvとoldを比較して、異なれば書き換えます。

function replaceMarkdown(elm) {
  var v, old = elm.value;
  return function () {
    if (old != (v = elm.value)) {
      old = v;
      str = $(this).val();
      $("#marked-area").html(str);
    }
  }
}

function replaceMarkdown(elm) {

var v, old = elm.value;

return function () {

if (old != (v = elm.value)) {

old = v;

str = $(this).val();

$("#marked-area").html(str);

}

なお、marked.jsを使用してstrをマークダウンに変換すれば、ちゃんと出力されます。

$("#marked-area").html(marked(str));

1	$("#marked-area").html(marked(str));

さいごに

マークダウンのプレビュー機能を調べている中で、RubyにもいろいろなGemがあることを知りました。
（例えば、Redcarpet）

今度はサーバーサイドでのマークダウン変換についても記事にしたいと思います！

日	月	火	水	木	金	土
« 2月				4月 »
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31