LionHeart SD BLOG

株式会社ライオンハート システムデザインの技術ブログ

Markdownをクライアント側でパースする(markdown-it利用)

こんにちは、株式会社ライオンハートの鵜飼です。

最近ではメモを取ったり、ブログを投稿する際にも良く使われている、軽量マークアップ言語のMarkdownについて調査することがあり、JavaScriptでパースするライブラリがあったので試してみました。

ライブラリ選定

JavaScriptのMarkdownパーサは色々と種類があるようで、比較検討されている方も居らっしゃるようです。

上記記事の中で紹介されている、markedも良さそうだったのですが(セキュリティ上の問題があったとか何とかもあり)、どうせだったので名前の挙がっていないライブラリを試してみました。
markedのセキュリティ問題は解決してるっぽいです。

今回利用させていただいたのは、markdown-itというライブラリです。最近のライブラリでは当然のように、クライアント側でも動作しますが、node.jsを利用したサーバ側でも動作するみたいですね。

クライアントで実行する

READMEではnodeで実行する場合の記述しか書いてなかったので、クライアント側で実行する場合の呼び出し方だけ残しておきます。

var md = window.markdownit();
var result = md.render( '# heading' );

オプションはmarkdowninit()に渡せばOKです。
例えばHTMLも許可する場合は、

var md = window.markdownit( { html: true } );
var result = md.render( '# heading' );

という感じですね。

デモ

左の入力欄にMarkdown表記で入力すると、右側に表示されます。

リンク

github.com