Skip to main content

Command Palette

Search for a command to run...

How to Create a Table of Content on Hashnode

Published
2 min read
How to Create a Table of Content on Hashnode
A

Hey there! You're welcome to my blog - Here I pen down articles specifically targeted at newbies in tech and front end web development and technical writing. If you're an expert, you could also use a thing or two.

Adding a table of contents in a blog post is a good way to let your readers know in a nut shell the content of your article and also avails them the opportunity to skip to a particular section of the article with just one click should they wish to do so.

For instance, you can decide to skip to the conclusion of this article, if you feel you already have an idea of what I'm writing about😎

In this article, I'll be showing you how to create a table of content for your articles which can be used to skip to certain sections of your post.

Step 1

So, the first thing to do is to preview your article, by clicking on the preview button right on top of your draft page.

step3.PNG

Step 2

Select the heading you'd love to skip to, right click and select inspect (if you're on chrome). This will launch you to the developer tools.

hashn.PNG

Step 3

In the image above, you'd see that the heading selected (Step 1) has a unique ID, copy this and save somewhere close.

Step 4

Go back to your table of content, select the list you'd love to link, click on the link tool right on top of your page and insert the id you just copied into the area that says (link)

Let's do this vividly, to achieve the link below,

First list out this content

hash.PNG

Then go ahead and select its texts, after which you click on the link icon right on top of your editing page.

ha.PNG

Enter, the id you copied previously into the area were you have [link]. Append a # before pasting the id.

You'd have this

has.PNG

Repeat this process for every other content in your table. Preview. Your table of content is all set.

Conclusion

We just looked at how to add table of content in the articles you post on your hashnode powered blogs. I look forward to seeing you add them in your next article.

Enjoyed the article? Follow me on twitter

A

This is very helpful, ideally though hashnode should include it by default as it is a very basic requirement.

V

Nice, useful feature. Exactly what I was searching for. Thanks!

R

Thanks! i was hoping to find this article! it helped me a lot to create a table for my new ( word warrior ) article that i will publish soon. Best regards!

F

Nice but here is a better way I found.

### Table of Content
- [Step 1](#step1)

## Step 1 <span id="step1"></span>
1
A

Pretty much the same. Thanks for sharing.

1
E

Great stuff and they're about to add in some custom css so smooth scrolling!

1
A

And they did...

D

Another option is to add your own anchor elements to the end of a heading.

## Introduction <a id="intro"></a>

Then you can add the link to your contents using the id that you specified. This way you can easily add a link back to the contents on really long articles.

## Introduction <a id="intro" href="#contents"> &#x2934;</a>

For this to work, you just need to add an anchor element with an id of 'contents' to your contents. The &#x2934; is a code for a return arrow symbol ⤴.

3
A

I'll try this one out. Thanks for sharing.

P

This is a simple yet awesome HTML hack. I would have never guessed it. Thanks Amarachi Emmanuela Azubuike

12
A

I'm glad you found it useful

1
S

Should say great timing!! I am struggling to create this and found your article. Really made it easy for me.🥰

1
A

Aww... I'm glad you found it useful

C

Nice, simple but effective! Great addition. Perhaps ask for a Feature request, to make it even simpler?

5
A

I'll do that. Thank you

1

More from this blog

A

Amarachi Azubuike

20 posts

Human - Residing somewhere at the intersection of people, tech, and education.