How to link to a specific paragraph in your Medium article (2018 Table of Contents method)

Update Feb 26, 2018: a member of the freeCodeCamp community just built a tool that makes this process extremely convenient. Instead of using the method I describe in this article, I recommend you just use his website.

gIWQ-TirKtcVt91mqai-UHzE0aBbNBiUYZkM — A screenshot from mediumtoc.com

I’m going to show you how you can make a nice hyper-linked Table of Contents for your Medium articles. Here’s what this will look like in your Medium article:

Each of these links will jump to a specific part of the article. This is a major usability improvement for your readers. Especially if your article is long enough to require multiple reading sessions to finish.

On the freeCodeCamp Medium publication, we frequently publish articles that are 20 minute reads, 40 minute reads, even 60 minute reads. And we find these Table of Contents to be super helpful.

Note that the technique I share here in this article has mixed results on mobile devices. So here’s hoping Medium formally adds this feature in the future.

Proof that this works

By clicking this link, you will be transported right back to this exact part of this article.

So here’s how you do this.

Each heading on Medium is its own HTML element, with its own id.

To get the id of the heading, you need to right-click on it, then click “inspect.”

This will open your browser’s developer tools. Here’s what this looks like:

Now you just need to get the 4-digit hexadecimal code associated with that HTML element. In this case, the id of the “Hello, World!” heading is 48f5.

Now you can use that code to make a special link that will link directly to that heading. These links follow this structure:

https://medium.com/p/[article ID]#[4-digit hexadecimal code]

The article ID is the 12-digit hexadecimal code for the Medium article. One of these codes is in every Medium URL. For example, the article ID for this article you’re reading is e66595fea549. Go ahead — check the address bar of your browser and you should see this code in the URL. This code is the universal identifier for your article and it will never change — even if you change the headline for your article or publish it in a Medium publication.
The 4-digit hexadecimal code is the code you got from the developer tools (in this case, 48f5).

Here’s the URL I used earlier to link back to my “proof that this works” section:

https://medium.com/p/e66595fea549#ddca

Let’s build a table of contents!

Here’s that table of contents I showed you earlier. Each of these will link to a different section of the same article:

A Chrome Extension to make this process easier

In response to this article, Cadu de Castro Alves created a Chrome extension that makes extracting the IDs from different paragraphs an more straight-forward process.

That’s all. Have fun, and happy writing!

If you found this article helpful, you should follow me on Twitter. I only tweet about programming and technology, and I won’t waste your time :)