#Making anchor links in MDX pages

5 messages · Page 1 of 1 (latest)

north ibex
#

How can I generate anchor links for headers when rendering mdx pages?

rancid tideBOT
#

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

#

When using Astro with Markdown and MDX, headings will automatically generate anchor links. This allows you to link directly to specific sections of your page. Here's an example:

---title: My page of content---## Introduction
I can link internally to **my conclusion** (#conclusion) on the same page when writing Markdown.
## Conclusion
I can use the URL `<https://example.com/page-1/#introduction`> to navigate directly to my Introduction on the page.

In this example, the ## Introduction and ## Conclusion headings will automatically generate anchor links. You can then use these links to navigate directly to these sections of the page.

Astro generates heading ids based on github-slugger. You can find more examples in the github-slugger documentation (https://github.com/Flet/github-slugger#usage).

Source: Astro Documentation (https://docs.astro.build/en/guides/markdown-content#heading-ids)

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

#

@north ibex kapa.ai is still learning and improving, please let us know how it did by reacting below

north ibex
#

well, the header HTML tags do include IDs, that's nice. however I still have to make links myself so looking for a recipe <@&1095491216776380548>