Markdown Parser どれを使うか

てがろぐCGIにはマークダウン記法をサーバー側で処理する機能は（現行では）ないので、自分だけで使うならクライアント側でごりごりやってくれてもひとまずは許容できるか…と思ったので（あくまでも許容できるならということになるが）Markdown パーサーを探している。自作するにはスキルが足りないし、安定して利用されているものを使う方が、脆弱性も少ないだろうからだ。

シェアが多そうなのはmarkdown-it, markedかなと思っていたが、wasmを利用したライブラリーもある。らしい。まだwasmがなんなのかよく理解していないが、WebAssembly を利用した markdown-wasm も見つけたので、備忘録的に残しておく。

markdown-wasmを知ったのはZennの次の記事でした。

高速で Markdown を HTML に変換してくれる『markdown-wasm』を使ってみた

https://zenn.dev

markdown-wasmを使ったてみたときのnote書きました。

てがろぐスキンのデモでMarkdown記法をhtmlに変換するライブラリを使用するようにした｜htrkwn

前々からMarkdown記法を使えるようにしようと思っていたけど、先日コードを足したまま特になにもアクションとらなかった。サーバー側で処理する機能を追加するためにCGI本体をいじるほどのモチベーションがないので（全記事それで書くならともかく）クライアント側でごりごりやってもらうことにする。どれを使用しよう…と考えて markdown-wasm 、キミに決めた。WebAssemblyは今後面白くなりそう。クライアント側でパースするので、素直にjsとwasmをダウンロードして使えばいい（はずだ）。Node.jsだったりESModule使ったりしない場合はこう。

https://note.com

<script>
  (async (d = document) => {
    await new Promise((resolve) => {
      const script = d.createElement("script");
      script.onload = resolve;
      script.src =
        "https://cdn.jsdelivr.net/npm/[email protected]/dist/markdown.min.js";
      d.head.appendChild(script);
    });
    await markdown.ready;

    if (d.readyState === "loading") {
      await new Promise((resolve) => {
        d.addEventListener("DOMContentLoaded", resolve);
      });
    }

    const elements = d.querySelectorAll('[data-categories~="marked"]');
    if (elements.length === 0) return;

    elements.forEach((el) => {
      el.innerHTML = markdown.parse(el.innerText);
      el.classList.add("prose", "max-w-none");
    });
  })();
</script>

demoのソースを眺めると、オプションをデフォルトから変更するときはこんな感じでいいっぽい？

const options = {
  parseFlags: markdown.ParseFlags.DEFAULT | markdown.ParseFlags.NO_HTML,
};

// Markdownテキストをパース
const mdText = '# hello\n*world*';
const result = markdown.parse(mdText, options);

console.log(result);

スクリプトの動的なインポートのところを見ていてやっと次のコードのscript.onload = resolve; が何してるのかわかった…。

HTMLElement: load イベントにもっと詳しい。

次の解説はchatGPTに聞いた。

script.onload = resolve; の行では、resolve 関数をイベントハンドラーとして割り当てています。これは、script タグの load イベントが発生したとき（つまり、スクリプトが完全にロードされたとき）に resolve 関数が自動的に呼び出されるようにするものです。この場合、resolve はコールバック関数として機能しますが、Promiseの解決をトリガーする特別な目的で使用されています。

(async (d = document) => {  
	await new Promise((resolve) => {
    const script = d.createElement("script");
    script.onload = resolve;
    script.src =
      "https://cdn.jsdelivr.net/npm/[email protected]/dist/markdown.min.js";
    d.head.appendChild(script);
  });
})();