Markdownエディタを作る（その１）

備忘録

自チームの生産性向上のためにMarkdownエディタを導入することに。

Markdownエディタと生産性向上の関係については別途書くとして、今回は最初にやったこと諸々について。

 

1.ベースとなるMarkdownエディタを導入する

スクラッチから作るのは手間なのでベースとなってくれるコードを検索。ちょうど良いものが以下の記事で公開されていたので、そのままいただくことに。

qiita.com

 

これが素晴らしくて、以下その理由。

1. とにかくシンプルに実装されている→カスタマイズしやすい

2. marked.jsが使われている→いくつかあるパーサーの中でおそらく一番良さそう

 

パーサーについては以下の比較記事が非常に参考になりました。

kannokanno.hatenablog.com

 

後は足りない機能を追加していくことになるが、まずはパーサーの設定と機能追加を。

 

2.パーサーの設定

marked.jsはsetOptions関数を使ってその動作を変更することができる。

今回「これまで使ってきたテキストエディタの代替ツール」としてメンバーに使ってもらうことを考えると、改行動作（半角スペース２つ＝改行）をなんとかしないといけない。実はその設定がここでできる。

editor.jsを以下のように修正することで、改行動作が通常のエディタと同じになってくれる。

marked.setOptions({
  breaks: true,   ←これを追記
  langPrefix: ''
});

 

3.パーサーに新たな処理を追加

次に、marked.jsにないパース処理を追加する。

追加したいのはチェックボックスへの整形処理。Atom等のMarkdownエディターでは普通に実装されているこの機能が、なぜかmarked.jsにはなかった。

ということでまたeditor.jsを修正。

var html = marked(src);

// チェックボックスへの変換機能を追加
html = html.replace(/\[x\]/g, '<input type="checkbox" checked="checked">');
html = html.replace(/\[ \]/g, '<input type="checkbox">');

$('#result').html(html);

 

これで「[ ]」と記入すると空のチェックボックスに、「[x]」と記入するとチェックが入ったチェックボックスに変換されるようになりました。

今回はなんの考慮もしていないお手軽改造です。何か不都合が見つかったらそのとき直します。

 

今回はここまで。

次回はたぶんUI周りについて書きます。