PackagesUIComponents
MarkdownToc
Markdownテキストから見出しを抽出する関数と、目次を表示するコンポーネント。
いつ使うか
- 長いMarkdownコンテンツの先頭に目次を配置し、全体構造を把握できるようにする
MarkdownViewerと組み合わせて、見出しへのジャンプを提供する
いつ使わないか
- サイドバーに固定表示する目次には使わない。スクロール同期が必要な場合は別の実装を検討する
- 見出しが2つ以下の短いコンテンツでは不要
Usage
import { extractHeadings, MarkdownToc } from '@bi-shop-it/ui/markdown-toc';
import { MarkdownViewer } from '@bi-shop-it/ui/markdown-viewer';
const headings = extractHeadings(content);
<MarkdownToc headings={headings} />
<MarkdownViewer content={content} />extractHeadings は Markdown テキストから見出しを抽出する純粋関数。MarkdownViewer の見出し id と同じ slug 生成ロジック（github-slugger）を内部で使用しており、アンカーリンクの一致が保証される。
Props
MarkdownToc
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
headings | TocHeading[] | — | extractHeadings で取得した見出しの配列 |
TocHeading
| プロパティ | 型 | 説明 |
|---|---|---|
id | string | 見出しの slug（MarkdownViewer の id と一致） |
level | number | 見出しレベル（1-6） |
text | string | 見出しのテキスト |
extractHeadings
const extractHeadings: (content: string) => TocHeading[];Markdown テキストを受け取り、見出しの配列を返す純粋関数。
バリエーション
デフォルト
const content = `# はじめに
## 第1章 思考の整理
### 1.1 寝かせる技術
### 1.2 忘却の効用
## 第2章 情報の取捨選択
### 2.1 インプットとアウトプット
## まとめ`;
const headings = extractHeadings(content);
<MarkdownToc headings={headings} />;アクセシビリティ
コンポーネントが内部で処理すること
<nav aria-label="目次">でランドマークとして認識される- リンクは
LinkPrimitive を使用しており、キーボード操作・フォーカスリングに対応している
利用者が対応すること
- 特になし
関連コンポーネント
MarkdownViewer— 目次と組み合わせて使用する。見出しのidが自動的に一致する