remark のバージョンアップで表示が崩れてしまった件

remark 13 がリリースされたので remark 12 からアップデートしたところ、Markdown の table や checkbox が表示されなくなりました。
勢いでアップデートしたのが良くなかったです。いろいろ調べて対処したことをまとめました。

remark をアップデートしたらテーブルやチェックボックスが変換されなくなった

remark 12 から remark 13 にアップデートすると起きる

正確にいうとリリースノートを読まずに無鉄砲にアップデートしたらなります。

Markdown でコンテンツを書いているプロジェクトで、markdown を remark で parse して remark-html で html に変換し表示…ということをやっていました。 先日 remark のリリースがあったので、試しに 12.0.1 から 13.0.0 に変更したところ、テーブルやチェックボックスが変換されなくなってしまいました。

現象

• Markdown

| Left    |   Right | Center  |
|:--------|--------:|:-------:|
| content | content | content |
| data    |    data |  data   |

• remark 12.0.1 の時の出力

<table>
  <thead>
    <tr>
      <th align="left">Left</th>
      <th align="right">Right</th>
      <th align="center">Center</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td align="left">content</td>
      <td align="right">content</td>
      <td align="center">content</td>
    </tr>
    <tr>
      <td align="left">data</td>
      <td align="right">data</td>
      <td align="center">data</td>
    </tr>
  </tbody>
</table>

• remark 13.0.0 にアップデートした時の出力

<p>| Left    |   Right | Center  ||:--------|--------:|:-------:|| content | content | content || data    |    data |  data   |</p>

table ではなくそのまま段落に入れられています。

チェックボックスも同じ状態です。

解決方法

リリースノートにすべて書いてありました。

This is a giant change for remark. It replaces the 5+ year old internals with a new low-level parser: micromark. ... move: gfm is no longer an option — moved to remark-gfm

Release 13.0.0 (micromark) · remarkjs/remark

内部で使用しているパーサーを micromark に置き換えたことで、CommonMark の仕様に基づいてパースされるようになったとのこと。

これにともない、remark-parse の gfm オプションがなくなったので、GitHub Flavored Markdown のスペックによる Markdown のパースは remark-gfm パッケージで行う必要がある。

そういえば | と - でテーブルを書けるのは GitHub Flavored Markdown の Extention のおかげなのでした。納得。

ということで remark-gfm をかませることで無事にパースされました。

まとめ

公式ドキュメントやリリースノートはちゃんと読む。