簡単なMarkdownエディタを作る

1. 自作 Web アプリに簡単な Markdown エディタを入れたくなった。
2. [埋込み型のエディタ](http://www.hsbt.org/diary/20120530.html) はあるっぽい。
3. でもそんな高機能でなくていいし、いちいち使い方調べるのシンドイし、 [Markdown の JavaScript 用パーサーはあるみたい](http://qiita.com/amay077/items/704d48130e5cf17e8654) だから簡単に作れそう。
4. 作ってみたら、３０分くらいですぐにできた。

ということで作り方メモ。

#作るもの
[こんなの](https://opengl-8080.github.io/apps/SimpleMarkdownEditor/editor.html)

左のテキストエリアに Markdown を記述すると、右側に結果が出力される。

[opengl-8080/SimpleMarkdownEditor](https://github.com/opengl-8080/SimpleMarkdownEditor)

#用意するもの
##Markdown のパーサー
Markdown で書いたテキストをパースして、 HTML を吐き出すパーサー。

[marked](https://github.com/chjj/marked) を使ってみる。

##コードのハイライト
コードブロックをハイライトしてくれるライブラリ。

[highlight.js](https://highlightjs.org/) を使ってみる。

##スタイル設定
marked が出力するのはただの HTML なので、いい感じに見た目を調整してくれる CSS を使う。

[「css markdown」](https://www.google.co.jp/search?site=&source=hp&q=css+markdown&oq=css+markdown&gs_l=hp.3..0j0i30l2j0i5i30l4j0i8i30l3.402.3024.0.3337.15.14.0.0.0.0.141.1270.4j8.12.0....0...1c.1.51.hp..5.10.1073.0.F4fkfR5I1N8) でググったら、トップに [Github 風の見た目にしてくれる CSS](https://gist.github.com/andyferra/2554919) があったので、これを使ってみる。

##その他
あと他に、 [jQuery](http://jquery.com/) と、 基本的なスタイル調整用に [bootstrap](http://getbootstrap.com/) を使う。

#仕組み
1. テキストエリアの keyup イベントを監視する。
2. テキストエリアの内容を取得する。
3. marked にパースさせる。
4. パース結果を HTML として出力する。
5. hightlight.js でコードブロックをハイライトする。

#作り方
##HTML を書く
```html:editor.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/marked/lib/marked.js"></script>
    <script src="bower_components/highlightjs/highlight.pack.js"></script>
    <script src="editor.js"></script>
    
    <link rel="stylesheet" href="bower_components/highlightjs/styles/github.css" />
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="github.css" />
    <link rel="stylesheet" href="editor.css" />
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-6">
          <textarea id="editor" class="form-control"></textarea>
        </div>
        <div class="col-xs-6">
          <div id="result"></div>
        </div>
      </div>
    </div>
  </body>
</html>
```

使用するライブラリの js と css ファイルを読み込んで、テキストエリアと出力先の div タグを配置している。

##JS を書く
```js:editor.js
$(function() {
    marked.setOptions({
        langPrefix: ''
    });
    
    $('#editor').keyup(function() {
        var src = $(this).val();
        
        var html = marked(src);
        
        $('#result').html(html);
        
        $('pre code').each(function(i, block) {
            hljs.highlightBlock(block);
        });
    });
});
```

特に難しいところはなく、「仕組み」をそのまま実装した感じ。

`marked.setOptions()` の設定は、 highlight.js との連携で必要になる。
詳しくは [JavaScript - Markdownパーサーのshowdown.js、markdown-js、markedを簡単比較 - ぼっち勉強会] (http://kannokanno.hatenablog.com/entry/2013/06/19/132042) を参照のこと。

```js:
$('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
});
```

ここで、全コードブロックに highlight.js を適用している。

`github.css` で bootstrap　の css を上書きしているのが若干怪しいけど、とりあえずそれっぽくなった。

#参考
- [HTML5 - Marked.js で Markdown をクライアント側でパースして表示する - Qiita](http://qiita.com/amay077/items/704d48130e5cf17e8654)
- [JavaScript - Markdownパーサーのshowdown.js、markdown-js、markedを簡単比較 - ぼっち勉強会](http://kannokanno.hatenablog.com/entry/2013/06/19/132042)
- [[CSS]等幅フォントにするためのおすすめのfont-family指定 | DevAchieve](http://wada811.blogspot.com/2012/12/monospace-font-family.html)