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）

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

日	月	火	水	木	金	土
			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

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

はじめに

環境

mark.js

公式ドキュメント

インストール

実際に使用してみる

オプションについて

プレビュー機能

vue.jsに関して

JQueryで書いてみたコード

JSのコードに関して

さいごに

フォロー

アプリ情報