本記事は React Advent Calendar 2016 9日目の記事です。
本稿では、remarkというプラグインベースのMarkdownプロセッサを用いて、ReactのdangerouslySetInnerHTMLを使わずにMarkdownをレンダリングする方法をご紹介します。
InkdropというMarkdown専用ノートアプリを作っていて、その中でこのremarkを使っています。
ReactでMarkdownをレンダリングしようと思うと、markedとかmarkdown-itを使ってHTMLの文字列に変換してからdangerouslySetInnerHTMLで無理やりねじ込む実装方法が多いと思います。
タイトルはちょっと大げさだけど最近思ったことを書く。
アプリ作ってると使っているモジュールの問題を発見したりするので、たまにissue立てたりPull Request送ったりしてる。
たまに感謝されるし、rejectされることもある。
３日前に立てたissueは、remarkというMarkdownプロセッサに関するプラグインで、remark-reactというReactでレンダリングするためのもの。
Markdownの仕様(というか実装)ではテーブルのセルの右揃えとか中央揃えは、HTML attributeのalignを使うようになっている。
しかしHTML5ではこのalignはobsoleteであり、Reactではサポートされておらず無視されてしまうためうまくレンダリング出来ない。
この問題に関する議論がこちら：
