#Is astro adding id to all heading elements?
2 messages · Page 1 of 1 (latest)
Yes, Astro does automatically inject an id attribute into all heading elements (<h1> to <h6>) in Markdown and MDX files. This is done to provide a getHeadings() utility for retrieving these IDs in Markdown exported properties. This feature is particularly useful for creating anchor links to specific sections of your page.
However, the documentation does not provide a direct way to disable this feature. But you can customize these heading IDs by adding a rehype plugin that injects id attributes (e.g. rehype-slug). Your custom IDs, instead of Astro’s defaults, will be reflected in the HTML output and the items returned by getHeadings().
Here is an example of how to customize heading IDs using the rehypeHeadingIds plugin:
import { defineConfig } from 'astro/config';
import { rehypeHeadingIds } from '@astrojs/markdown-remark';
import { otherPluginThatReliesOnHeadingIDs } from 'some/plugin/source';
export default defineConfig({
markdown: {
rehypePlugins: [
rehypeHeadingIds,
otherPluginThatReliesOnHeadingIDs,
],
},
});