TOC (Table of Contents)

記事の見出し一覧を表示し、画面のスクロール位置に応じて現在表示されているセクションを自動でハイライトするコンポーネントです。

Usage

Note

このコンポーネントはSvelteで構築されています。MDX内などでインタラクティブに動作させるには client:load などのクライアントディレクティブが必要です。

Astroの Markdown / MDX ページで取得できる headings データを渡し、client:idle などのディレクティブを付与して使用します。以下はダミーデータを渡した表示例です。

<TOC
  headings={[
    { depth: 2, slug: 'usage', text: 'Usage' },
    { depth: 3, slug: 'props', text: 'Props' },
    { depth: 2, slug: 'example', text: 'Example' },
  ]}
  client:idle
/>

← コンポーネント一覧へ戻る