How to Create a Table of Content on Hashnode
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.
So, the first thing to do is to preview your article, by clicking on the preview button right on top of your draft page.
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.
In the image above, you'd see that the heading selected (Step 1) has a unique ID, copy this and save somewhere close.
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
Then go ahead and select its texts, after which you click on the link icon right on top of your editing page.
Enter, the id you copied previously into the area were you have [link]. Append a # before pasting the id.
You'd have this
Repeat this process for every other content in your table. Preview. Your table of content is all set.
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
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"> ⤴</a>
For this to work, you just need to add an anchor element with an id of 'contents' to your contents. The
⤴ is a code for a return arrow symbol ⤴.