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

4 3

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 👀

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay