blog.unresolved.xyz
Mon Dec 27 2021

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

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

HタグにIDを追加する

これを使うだけ。

rehypePlugins={[slug]}

目次を表示させる

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

## Table of contents

Pluginに引数を渡したい

これでいける

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

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

Author
Daisuke Tsuji

Daisuke Tsuji

フリーのSoftware Developer。

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

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