Handling anchors in posts created with markdown

Support
2

Hey, welcome!

Is this syntax from kramdown or PHP Markdown Extra?

Discourse relies on MarkdownIt, which is based on CommonMark spec. It doesn’t support specifying a header ID.

It seems that they discussed it at some point: Anchors in markdown - Spec - CommonMark Discussion, but I don’t see any definitive conclusion.

However, Discourse generates anchor automatically.
You can see it here:

Essentially, you can expect those IDs:

  • h-{headingId} (no post ID, no slug)
  • h-{slug}-{headingId} (no post ID)
  • p-{postId}-h-{headingId} (post ID, no slug)
  • p-{postId}-h-{slug}-{headingId} (post ID, slug)

E.g.:

The image displays a detailed interface of an online IDE, showcasing HTML code syntax with highlighted elements, including an anchor tag, the anchor tag's associated values, a CSS flex property, and semantically relevant code structures. (Captioned by AI)
The image displays a detailed interface of an online IDE, showcasing HTML code syntax with highlighted elements, including an anchor tag, the anchor tag's associated values, a CSS flex property, and semantically relevant code structures. (Captioned by AI)865×308 23.1 KB

If you prefer, you can still create an anchor manually with HTML, e.g., <a name="anchor_name"></a>

The image shows a web browser window with a "Header" text box open, containing HTML code: "<<" followed by the '<a name="test">Header</a>'. (Captioned by AI)
The image shows a web browser window with a "Header" text box open, containing HTML code: "<<" followed by the '<a name="test">Header</a>'. (Captioned by AI)708×156 6.87 KB

The image displays HTML code that creates an anchor tag linked to "header-1" with attributes "name" and "href" set to "p-704-a-nametestestast Header" and "test," respectively, indicating a webpage navigation interface relating to performance monitoring. (Captioned by AI)
The image displays HTML code that creates an anchor tag linked to "header-1" with attributes "name" and "href" set to "p-704-a-nametestestast Header" and "test," respectively, indicating a webpage navigation interface relating to performance monitoring. (Captioned by AI)801×190 16.3 KB

Additional resources –
If you need to generate a Table of Contents, there is this component for you:

5 Likes