ブラウザで動くMarkdown editor

vue.jsの公式サイトのexampleにmarkdown editorっていうのがあって、以下のコードの様にただfilterにmarked指定するだけでちゃんと動いててすごかった。

new Vue({
  el: '#editor',
  data: {
    input: '# hello'
  },
  filters: {
    marked: marked
  }
})

htmlもこれだけ

<div id="editor">
  <textarea v-model="input"></textarea>
  <div v-html="input | marked"></div>
</div>

marked.jsのmarked関数を適用してるだけなのでmarked.jsがすごいのかもだけど、感動したので手元でも動かしてみた。

環境

例によって、yoのwebappを使う。

bowerでvue.jsとmarked.jsをinstall。ついでに、textareaが縦に伸びていく様にjquery-autosizeもインストール。

$bower install vue marked jquery-autosize --save

markedは勝手にはindex.htmlに追記されないので、自分で追記してやる必要がある。

    <!-- manual import -->
    <script src="bower_components/marked/lib/marked.js"></script>

後は、autosizeを適用するコードをjsに追記。

 11 $(document).ready(function(){
 12   $('#autosizable').autosize();
 13 });

htmlもちょっと修正

   38       <div id="editor">
   39         <div v-html="input | marked"></div>
   40         <textarea v-model="input" id="autosizable" ></textarea>
   41       </div>
   42     </div>

cssも書いてやる。

   95 html, body, #editor {
   96   margin: 0;
   97   height: 100%;
   98   font-family: 'Helvetica Neue', Arial, sans-serif;
   99   color: #333;
  100 }
  101
  102 textarea, #editor div {
  103   display: inline-block;
  104   width: 49%;
  105   height: 600px;
  106   vertical-align: top;
  107   -webkit-box-sizing: border-box;
  108   -moz-box-sizing: border-box;
  109   box-sizing: border-box;
  110   padding: 0 20px;
  111 }
  112
  113 textarea {
  114   border: none;
  115   border-right: 1px solid #ccc;
  116   resize: none;
  117   outline: none;
  118   background-color: #f6f6f6;
  119   font-size: 14px;
  120   font-family: 'Monaco', courier, monospace;
  121   padding: 20px;
  122 }
  123
  124 code {
  125   color: #f66;
  126 }
  127

ついでに、highlight.jsをインストールしてcodeのsyntax-highlightもしてみた。

$ bower install highlightjs --save

jsにもちょこっと追記

  1 marked.setOptions({
  2   highlight: function (code) {
  3     return hljs.highlightAuto(code).value;
  4   }
  5 });

これだけで、以下の画像みたいに表示される。けっこうちゃんとしたmarkdown editorになっててすごい!!

ちなみに、右側がテキストエリア、左側がmarked.jsでレンダリングした結果になっている。vue.js使ってるのでもちろんリアルタイムで表示がされる。

まとめ

余計なお世話かもだけど、はてなブログにもプレビュー同時に見ながら編集できるマークダウンエディタがついてると嬉しいなーとか思った。ただ、画面のサイズどうするのとかいろいろ問題あるし、実際つけると微妙なのかもなーとも思った。試してみないと分からなそう。

ただ、はてなブログのプレビュー見るときにサーバーへリクエスト送ってるっぽくてけっこう遅延があるので、クライアントサイドでのレンダリングは試す価値があると思う。