Table of contents ブロックを notion-block-renderer へ機能追加

Published
2022-09-01
Author
Takuma Fujimoto 🦊
Tags
Share

Notionブロックをレンダリングするパッケージ notion-block-renderer を開発しています。

この度、ブロックタイプのなかの、目次に相当する table_of_contents も使えるように機能追加しました。


Notionの中では見出しブロックがある状態で、table of contents を使うと目次項目が自動生成されます。

notion-block-renderer では、table_of_contents がある場合、

  • 見出し1、見出し2、見出し3のブロックを探し、
  • それらのテキストを含めた目次を生成。
  • 各見出しブロックには id属性にブロックidを付与。
  • 目次の各項目は aタグになっており、href属性に上記idをセット。

以上によって、見出しブロックまでページ内リンクで飛ぶことができるようになります。



試しに以下では table_of_contents ブロックと見出しブロックでどのようになるかを載せておきます。


下記が Table of contents 。


下記がサンプルの見出し。

Heading1

Heading2

Heading3

Heading2


それぞれの目次項目をクリックすると該当の見出しまで飛ぶことができます。


@takuxone

記事を読んでいただきありがとうございます!ツイッターではプログラミング以外についてや、たまにクーポン情報もツイートしたり、しなかったり。。。ツイッターでもお待ちしてますー。

🎓✍️ コース一覧

プログラミング関係のビデオコースを提供しています。気になるものがあるか、一度チェックしてみてください。