reactmarkdown から markdown-to-jsx への移行

  • #React

remix で開発しているブログで、マークダウンをhtmlに変換する際に reactmarkdown を使用していたが、よくわからないレンダリングの問題(深く調査できていないが、関連したissueが2年前からOpenになっていて諦めた)で、使用できなかった。

厳密には、 reactmarkdown のコンポーネントを使用しているブログの詳細ページへのリンクを踏んだ際に、 504 error になる。 Remix で SSR しているからか、 node ではなく bun を使っているからか、考えられる原因が多く調査に乗り気になれなかった。(そこまで reactmarkdown にこだわりなかったし)

reactmarkdown の代わりに、issue で動作すると言及されていた markdown-to-jsx を使うことにした。 reactmarkdown では、タグごとにカスタムコンポーネントを割り当てていたので、同等の機能が欲しかったが、 markdown-to-jsx もオプションでそれができた

結果的に、 reactmarkdown で用意していたカスタムコンポーネントをほぼそのまま使えたが、一点だけ注意点があった。

md の codeblock について、 reactmarkdown では、 言語部分をクラスに language-js などと prefix に language とつけるが、 markdown-to-jsx は、 lang-js と、 lang だけなので、そこだけ注意する。

← 記事一覧へ