Handling anchors in posts created with markdown

Support
1

Hey community, I am using a discourse site to publish some specs that are primarily written in markdown, but I came to the problem that the anchors used for the headers are being rendered, while they should be hidden.

Does anyone know if there is a way to hide them?

image
image1333×533 27.8 KB

2 Likes
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
3

Thanks a lot @Arkshine!

The issue is more because we are publishing the markdowns used for other reasons in discourse as well, so the people who keep the documents use these anchors for cross-reference when merging multiple markdowns in a single document.

I think I will make some sort of script to clean up before posting the content.

3 Likes
4

I see!

The solution is also to make a plugin for Discourse with a markdown plugin to support this syntax. If you have some budget, you could ask Marketplace.

5

@Nihokam

If you’re still interested, I made a tiny Discourse plugin that handles specifying an anchor ID next to the heading.

It works alongside Discourse’s automatic heading anchors.
Note that it’s basic support. There are probably a lot of variants, but this plugin supports only the following:

## My Heading {#custom_section}

will generate:

<a name="custom_section" href="#custom_section" class="custom-anchor-id"></a>

The image displays a Markdown editor interface with various HTML and Markdown formatting icons, and an expanded heading list with heading 1, sub-heading 1.1, another heading, and custom HTML entity symbols in the toolbar. (Captioned by AI)
The image displays a Markdown editor interface with various HTML and Markdown formatting icons, and an expanded heading list with heading 1, sub-heading 1.1, another heading, and custom HTML entity symbols in the toolbar. (Captioned by AI)922×286 7.71 KB

image
image365×223 9.99 KB

The image shows an HTML snippet with nested and tags containing custom anchor references for clickable sections titled "Heading 1", "Sub-heading 1.1", and "Another heading". (Captioned by AI)
The image shows an HTML snippet with nested and tags containing custom anchor references for clickable sections titled "Heading 1", "Sub-heading 1.1", and "Another heading". (Captioned by AI)771×310 10.5 KB

You can give it a try! Let me know if you have any issues with it.

2 Likes