DEV Community

Andy Zhao (he/him) for The DEV Team

Posted on

Markdown Headers Are Now Anchored!

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)
Enter fullscreen mode Exit fullscreen mode

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?)
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (10)

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)

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 • Edited

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
Christian Vasquez

Opening tressure chest

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
David J Eddy

Nice!

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 ๐Ÿ‡ฎ๐Ÿ‡ฑ๐Ÿ‡จ๐Ÿ‡ฆ

๐Ÿ‘๐Ÿ‘๐Ÿ‘๐Ÿ‘๐Ÿ‘๐Ÿ‘๐Ÿ‘๐Ÿ‘