【JavaScript/PHP】Markdownのパーサーで PHP でも JavaScript でも同じ結果が欲しい時は、CommonMark に準拠したライブラリだと良いですよ、という話

例えば、JavaScript では marked、PHPでは Cebe Markdown を使ってマークダウンをゴニョゴニョするとき、マークダウンをパースして得られるHTMLが微妙に違います。

「*****強調*****」とした場合、

1. <strong\>*</strong>強調<strong>*</strong>
2. <strong><strong><em>強調</em></strong></strong>

のどちらになるでしょうか。正解というか厳格なルールが決まってない以上、パーサーの作成者判断になってしまいます。ちなみにmarkedでは1、Cebe Markdownでは2です。

他にも引用時の改行の扱いとか細かい部分の違いが結構あるみたいで、マークダウンでブログ記事などを保存している場合、利用してるパーサーの変更によってデザインが乱れたりと将来的にトラブルが発生しそうです。

CommonMark について

そこで、CommonMark に準拠したライブラリを使っておくと安心ですっていう話。

かいつまんで言うと「Markdownの方言多すぎるしStandard Markdownって名前で共同プロジェクトつくろうとしたけど紆余曲折あって結局CommonMarkって名前になったわ」という感じです。

引用元:Markdownを拡張して独自記法をつくる

日本語の情報は少ないのですが、HTMLでいえばW3Cみたいなものでしょう。ちなみに「方言」に関しては、 GFM の table だったり Markdown Extra の dl といった独自拡張に限らず、上で書いた強調のレンダリングの仕方なんてのも定義されてるみたいですね。

ということで、賛否両論あるみたいですが、個人的は CommonMark に準拠したライブラリを使い、必要に応じて独自に機能を拡張していく方針がベストかなと思っています。以下のライブラリは比較的人気のようで、実際に同じレンダリング結果になりました。

興味があれば、「CodeMirror などで実装した Markdown エディタのリアルタイムプレビューにスクロール位置同期を実装する」 もご覧ください!