DEV Community

Cover image for How to create a beautiful table of contents on Hashnode
Dmitriy Zub ☀️
Dmitriy Zub ☀️

Posted on • Edited on • Originally published at serpapi.com

How to create a beautiful table of contents on Hashnode

What is table of contents ToC

To put it simply, tables of contents are crucial part of each blog post that lets your readers quick access to parts of the information they want, fast.

When using Markdown, the default approach would be to use unordered list with enclosed links which looks good but could be better.

How to make new fancy table of contents on Hashnode

toc_01

As you can see, Hashnode generates table of content from <h2>or <h3> headers and nesting them nicely.

How to preview table of contents on Hashnode

toc_02

How to create table of contents in Markdown

To create basic table of contents in Markdown you would use:

  1. Unordered list.
  2. Enclose the link text in brackets so when you click on the text it will just to the content.
- [Example](#first-example)
- [Example2](#second-example)
- [Third Example](#third-example)
- [Fourth Example](#fourth-example)

... some text

## Example
## Example2
## Third Example
## Fourth Example
Enter fullscreen mode Exit fullscreen mode

image

Conclusion

Make it convenient for your reader. If the reader wants immediately jump to a piece of code, give him the opportunity to do so. Let your readers decide what to read and pay attention to what is important to them, in case the order does not need to be followed.

By the way, if you're looking for a programmatic data extraction solution from Google (PlayStore, Maps, Images, YouTube..), Yahoo!, Naver, Bing and so on, have a try SerpApi 👀

Top comments (0)