アンカー見出し

AnchorHeading コンポーネントは見出しを定義します。具体的には、次を行います。

1. 見出しに対応する URL フラグメントを生成します。
2. URL フラグメントを使える構文に整形します。たとえば & は - に置き換えます。
3. 各フラグメントの URL をコピーするボタンを作ります。
4. 見出しのテキストとは別に、見出しフラグメントを定義できます。

import { AnchorHeading } from "~/components";

<AnchorHeading title="How to use AnchorHeading" slug="use-anchorheading" depth={2} />

Markdown ファイル（partials を含む）では、rehype プラグインによってこの動作がデフォルトで適用されます。そのため AnchorHeading コンポーネントが必要になるのは、コンポーネント内で自分で見出しを書くときや、Markdown 以外のファイルを扱うときがほとんどです。

Markdown 内の見出しに付く ID を上書きするには、行末に MDX コメントを追加します。

## foo {/*bar*/}
{/* HTML: <h2 id="bar">foo</h2> */}