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

前々からMarkdown記法を使えるようにしようと思っていたけど、先日コードを足したまま特になにもアクションとらなかった。サーバー側で処理する機能を追加するためにCGI本体をいじるほどのモチベーションがないので（全記事それで書くならともかく）クライアント側でごりごりやってもらうことにする。

どれを使用しよう…と考えて markdown-wasm 、キミに決めた。WebAssemblyは今後面白くなりそう。

クライアント側でパースするので、素直にjsとwasmをダウンロードして使えばいい（はずだ）。Node.jsだったりESModule使ったりしない場合はこう。

<script src="markdown.js"></script>
<script>
window["markdown"].ready.then(markdown => {
  console.log(markdown.parse("# hello\n*world*"))
})
</script>

markdown-wasm 利用時の最小記述 - なにかあるよ

こちらの記事にあった非同期読み込みなどを参考にしてCDN使いつつ今の自分が理解できそうに書き換えています。ありがたい。

<script>
  (async (d = document) => {
    await new Promise((resolve) => {
      const script = d.createElement("script");
      script.onload = resolve;
      script.src =
        "https://cdn.jsdelivr.net/npm/markdown-wasm@1.2.0/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>

全記事をMarkdownで書くことはない前提なので、特定のカテゴリー（"marked"）に分類した記事だけ変換することにして、onelog.htmlの記事本文の要素にはdata属性を与えておく。例えばこんな感じで。

<section
	class="comment mt-4 text-base"
	data-categories="[[CATEGORYIDS]]"
>
	[[COMMENT]]
</section>

あとはTailwindCSSのTypographyなクラスを付与して読みやすくしてある。

オプションもカスタマイズできるけども、とりあえずデフォルト設定のままにしてある。

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

https://github.com/rsms/markdown-wasm/blob/master/docs/index.html

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);