概要

GatsbyでMarkdownをパースしてHTMLに変換するためのプラグインであるgatsby-transformer-remarkを使ってリストを作成する際の話です。

Markdown上で順序無しリストを3段階にネストしたときに2段階のリストとして変換されてしまうという問題に直面しました。

同プラグインのバージョン2.8.20時点の話なので、今後改善されることはあるかもしれません。

対応

次のIssueにあるとおり、インデントが半角スペース2つだとうまく表示できず、半角スペース4つにすると上手くいくようです。

[gatsby-transformer-remark] Third level nested unordered list items render as second level · Issue #4096 · gatsbyjs/gatsby

NGパターン

- 1st level 1
  - 2nd level 1
    - 3rd level 1
    - 3rd level 2
  - 2nd level 2
- 1st level 2

OKパターン

- 1st level 1
    - 2nd level 1
        - 3rd level 1
        - 3rd level 2
    - 2nd level 2
- 1st level 2