Astroのプロジェクトにあるマークダウンのファイルで、見出しに独自のidをつける方法をまとめました。

以下のようなファイルがあるとします。

## Heading {#anchor}

これを以下のように出力する方法です。

<h2 id="anchor">Heading</h2>

remark-heading-id

まず、プロジェクトにremark-heading-idをインストールします。

npm i remark-heading-id

astro.config.mjs

次に、astro.config.mjsに以下を追記します。

import remarkHeadingId from 'remark-heading-id';

export default defineConfig({
  markdown: {
    remarkPlugins: [remarkHeadingId],
  },
});

この設定により、マークダウンの見出しに独自のidが付与されます。

参考：Support custom header IDs in Markdown #329