loading...
The DEV Team

Markdown Headers Are Now Anchored!

andy profile image Andy Zhao (he/him) ・1 min read

You can now link to headers in your posts! This happens automatically when you create a header. It will create an anchor link based on the text of your header. For example, if you have a header like "Implementation", you can visit https://dev.to/andy/andys-post#implementation to jump straight to the "Implementation" section of the post.

Here's a more straightforward example:
Click to jump to the bottom of the page

How to use

[Jump to "How to use"](#how-to-use)

Jump above to the "How to use" header

When using multiword headers, the anchor link will convert spaces to dashes.

How to link to a header from a different post

You might want to link to a specific section of a different post. Well, you can do that, too:

[External post header jump example](https://dev.to/rhymes/changelog-export-posts-1kdm#how-do-i-do-that?)

External post header jump example

If you'd like this functionality for your previous posts, you'll need to resave the post itself.

Thanks @glebec and @bennypowers for getting the PR rolling!

Bottom

My header is called "Bottom", so visiting #bottom will move you to this section of the content.

Jump back to "How to use" section

Check out the PR here.

Happy coding!

Discussion

pic
Editor guide
Collapse
ben profile image
Ben Halpern

Low-key heroism by Andy upon the idea of mentioning in this post that there is a small issue with some browsers.

Instead of make mention and deal with this later, he just makes the fix and ships the post.

Collapse
ben profile image
Ben Halpern

Speaking of things along those lines that may have slipped through: I think the Ajax-loaded internal browsing may be breaking the link-to-other-post functionality. Will check more tomorrow.

Important thing is that the underlying markdown/html is sound and will be sturdy going forward. 😊

Collapse
andy profile image
Andy Zhao (he/him) Author

Thanks @glebec for starting the PR and @bennypowers for helping out!

Collapse
johnbiundo profile image
John Biundo

This is nice, but these named anchors don't work from one page to another within dev.to, at least in Chrome. For example, if I link to a section of my post (using https://dev.to/nestjs/integrate-nestjs-with-external-services-using-microservice-transporters-part-1-p3#broker-message-protocol), the page is always scrolled to the top. Interestingly, if I open the link in a new tab (right mouse click -> open in new tab) it works fine.

Also, this would be so much better if the page rendered with visible icons indicating the bookmarkable content corresponding to named anchors. This would make it a lot easier to share a deep link to a section.

Collapse
nickytonline profile image
Nick Taylor (he/him)

Aww yeah. Great work @devteam! Ooops! I see it was @glebec and @bennypowers and some dev team assitance via @andy . Great work! Always nice seeing the community contributing to the dev.to codebase.

Collapse
chrisvasqm profile image
Collapse
chrisvasqm profile image
Christian Vasquez

GIFs aside, this is going to be super useful!

I stopped trying to make like a table of content on some of my longer posts because we didn't have this functionality, time to update 'em all :D

Collapse
david_j_eddy profile image
Collapse
dance2die profile image
Sung M. Kim

Thank you guys.

Time to create those ToCs for people easily skim through what the post is going to be about.

Collapse
bennypowers profile image
Benny Powers 🇮🇱🇨🇦

👏👏👏👏👏👏👏👏