blog.unresolved.xyz
Mon Dec 27 2021

react-markdownで目次(Table of Contents)を表示させる

なんかHackyなことしなきゃいけないのかなと思ったけど、ちゃんとremark/rehypeのプラグインを渡せるようになってた。

HタグにIDを追加する

これを使うだけ。

rehypePlugins={[slug]}

目次を表示させる

  • https://github.com/remarkjs/react-markdown/blob/8e07e9c3ed740977d6922a6d58e5113f1c09a0c2/test/test.jsx#L1175

上記を参考に remarkPlugins を設定して、本文に以下のように Table of contents という見出しを設定すればそこに目次が配置される。

## Table of contents

Pluginに引数を渡したい

  • https://github.com/remarkjs/react-markdown#use-a-plugin-with-options

これでいける

remarkPlugins={[[toc, { tight: true }]]}

型があるとライブラリの仕様を追いやすくていいなあ・・・!

Author
Daisuke Tsuji

Daisuke Tsuji

フリーのWeb Developer。

RubyとかRailsを触ってる時間が多い。コーディングもマークアップもライティングもデザインもSEOもやるタイプ。

だいたいどれもだめ。業務委託のお仕事募集中。