--- title: Marked.js で Markdown をクライアント側でパースして表示する tags: HTML5 JavaScript Markdown author: amay077 slide: false --- [Typescript クイックガイド](http://phyzkit.net/typescript/) で、ソースを見たら Markdown で書かれてたのをみて「カッケー」と思ったのと、[利用規約やプライバシーポリシーは Github に置くといいよ](http://www.atmarkit.co.jp/ait/articles/1302/05/news091.html) というのを見て、なら「github に .markdown ファイルを置いてクライアントサイドでスタイリングできたら嬉しいじゃん?」と思いやってみた。 ## Javascript による markdown パーサいろいろ 上記 Typescript クイックガイド では [marked.js](https://github.com/chjj/marked) が使われているようだが、他にもいろいろある模様。下記にて比較してくださっている。 * [JavaScript - Markdownパーサーのshowdown.js、markdown-js、markedを簡単比較 - ぼっち勉強会](http://kannokanno.hatenablog.com/entry/2013/06/19/132042) もともと marked.js を使おうと思ってたし、上記サイトでも問題無さそうだったので、そのままいく。 ## 使い方 marked.js を読み込んだ後、 ```js: var formatted = marked(markdown_text) ``` で、HTML に整形された文字列が返されるというシンプルなもの。(整形オプションがいろいろあるようだが割愛) Typescript クイックガイドでは、HTML 内に Markdown テキストがベタ書きされていたが、せっかくなので管理がしやすいように外部 Markdown ファイルを読みこむようにしてみた。 ```html:md_renderer.html Markdown renderer
``` 一番下の ```
``` の src に読み込む Markdown ファイルを指定するようにした。 bootstrap で見栄えを良くしているが、必須ではない。 こちらが [デモ](http://blog.amay077.net/assets/images/posts/md_renderer/md_renderer.html) 。 さすがに描画に少し時間がかかるみたいです。 ``marked()`` は非同期版もあるようなので、そちらを使うべきだったかな。 これで、データ(Markdown)とプレゼンテーション部(HTML)を分離できて、なんか良さげな感じがする。 Octopress とか、HTMLを生成しちゃうんじゃなくて、クライアントサイドで 「Markdown を描画する」できると、投稿の手間が減って良いかもですね。