はじめに
今回は, MOONGIFT さんで紹介されていた『markdown-wasm』について紹介します.
その名の通り WebAssembly を使っているとのことでかなり高速で動くみたいです.
まだ細かい検証はできていないんですが, 備忘録として概要と導入方法について紹介します.
『markdown-wasm』とは？
『markdown-wasm』は, C のコードを WebAssembly に移植した超高速な Markdown パーサーです.
主な特徴は以下です.
- 依存関係なし(31 kB gzipped)
- どこでも実行ができ, かつ安全(WebAssembly なので分離されたメモリで実行できる)
- シンプルな API
- とても速い
- md4c(C で作られた Markdown parser) をベースに作られている - (CommonMark の仕様に準拠)
速度面では, 公式ページでベンチマーク結果を公開しており, 他のライブラリと大差をつけた結果が出ているのがわかると思います.
サンプルプログラム
入力された Markdown の内容をリアルタイムで変換して html として表示するサンプルです.
コード
<body>
<h1>${title}</h1>
<textarea id='$input' class='input' rows='10'># Hello, world!</textarea>
<div id='$output' class='output'></div>
<script src='https://cdn.jsdelivr.net/gh/rsms/markdown-wasm@v1.1.2/dist/markdown.js'></script>
<script>${script}</script>
</body>
window.onload = async () => {
// 準備を待つ
await markdown.ready;
$input.oninput = () => {
// 入力されるたびに変換する
var md = markdown.parse($input.value);
$output.innerHTML = md;
};
// 一回実行しておく
$input.oninput();
};
解説
markdown-wasm を読み込もう
まずは markdown-wasm を読み込んで使えるようにします.
特に公式から cdn として配布されてたりはしていなかったので, jsdelivr を使って読み込みましょう.
<script src='https://cdn.jsdelivr.net/gh/rsms/markdown-wasm@v1.1.2/dist/markdown.js'></script>
読み込むと markdown というオブジェクトを使えるようになります.
markdown-wasm の準備を待とう
markdown は, ready という Promise を持っていて準備が終わると resolve するので以下のように async/await で準備を待ちましょう
window.onload = async () => {
// 準備を待つ
await markdown.ready;
...
Markdown を HTML に変換しよう
最後に入力に変更があったタイミングで Markdown -> HTML に変換しましょう.
変換は markdown.parse() を呼び出すだけで簡単にできます.
$input.oninput = () => {
// 入力されるたびに変換する
var md = markdown.parse($input.value);
$output.innerHTML = md;
};
これで markdown-wasm 経由で変換された結果が表示されます.
おわりに
以上, markdown-wasm の使い方の紹介でした.
今回は触りだけでしたが, 次回は marked.js や markdown-it とのベンチマーク比較やインターフェースや機能の違いなんかも検証して書いていけたらと思います.
普段自社でサービス作る際は marked.js を使うことが多いんですが, 速度や拡張性で悩むことが多いのでこれを期にキャッチアップして選択肢を増やせたらと思ってます.
Discussion