#Is astro adding id to all heading elements?

2 messages · Page 1 of 1 (latest)

naive roseBOT
#

Hi @cerulean geode. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

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,
 ],
 },
});

For more details, you can refer to the Astro documentation on Markdown & MDX (https://docs.astro.build/en/guides/markdown-content#heading-ids-and-plugins).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: