DEV Community

Cover image for [Survey] Automatic Table of Contents in Articles

Posted on

[Survey] Automatic Table of Contents in Articles

If you're an avid reader on, you might have come across articles that feature a table of contents generated from a markdown heading elements. This humble yet effective tool serves as a roadmap for readers, offering a clear overview of the article's structure. In my opinion, this is not just a good practice; it's an excellent one.

Image description

Here are a few reasons why I believe having a table of contents is beneficial:

  1. Structural Overview: A table of contents provides readers with an immediate sense of the article's organization. It allows readers to gauge the depth and breadth of the content, making it easier to decide if the article meets their needs.

  2. Time Saver: A table of contents can be a real time-saver. It lets readers jump directly to the sections that interest them the most, skipping over parts they may already be familiar with.

A Proposal for

Now, let's consider a thought: What if took the initiative to automatically generate a table of contents for every article and placed it conveniently on the right side of the article?

This feature could revolutionize the reading experience on the platform. Imagine being able to glance at the table of contents before diving into an article. It would provide a quick preview of what the article contains, allowing readers to decide whether it's worth their time. Additionally, the automatic generation of the table of contents would alleviate the burden on authors, who often manually create these sections.

What's your take on this idea?

Please leave a comment and share your thoughts on this matter. I hope that a lot of feedback about this feature can be an input for to improve the reading experience.

Top comments (7)

ranggakd profile image
Retiago Drago

I think not every post could fit under this umbrella. I see it more like how YouTube generate their timestamp section onto video which doesn't have one. It is suitable for longer videos but not so much for shorter ones. Do you know what I mean?

Also, I kind of addicted to collapsible table content that I learned from GitHub can be applied here too like this below. I've been using it ever since.


## {% details Outlines %}
- [Introduction](#introduction)
  - [Steganography](#steganography)
- [Project Setup](#project-setup)
- [Core Concepts](#core-concepts)
  - [Mapping Techniques](#mapping-techniques)
  - [Bit Manipulation for Hiding Images](#bit-manipulation-for-hiding-images)
  - [Bit Manipulation for Revealing Images](#bit-manipulation-for-revealing-images)
  - [Bit Manipulation for Reconstructing Images](#bit-manipulation-for-reconstructing-images)
- [Implementation Details](#implementation-details)
- [Results and Visualization](#results-and-visualization)
- [Limitations and Future Work](#limitations-and-future-work)
- [Conclusion](#conclusion)
  - [Summing Up the Journey](#summing-up-the-journey)
  - [Technical Achievements](#technical-achievements)
  - [Key Takeaways](#key-takeaways)
{% enddetails %}
Enter fullscreen mode Exit fullscreen mode
ruthmoog profile image
ruthmoog • Edited

Nice! I love details/summary in HTML, I didn't figure out how to do this in

jacktt profile image

You can try generating table of content from markdown here:

niklasrefnov profile image

But how would you link to the anchors in the table of contents? I can't seem to find a way to assign my headers an id

jacktt profile image

Like GitHub, each heading has its ID that is normalized to a URI.
You can see this article:

ruthmoog profile image

It would be nice to have it in the side bar, appropriate for research-like and education articles, that's the kind of thing you see on gitbooks as well.

Perhaps blog posts are not the right format for that? maybe a series is enough with already has in place - but the flexibility of options is probably a good thing. I like it and can see myself using jump-to links in my longer blogposts tbh!

ruthmoog profile image
ruthmoog • Edited

Here's some examples of what I meant

Learn Go With Tests on GitBook - table of contents shows chapters and location in the book
Side bar shows contents

Hindawi's Article of the year 2022, example of a research paper, which all have approx the same structure so you can skip to the good bits ;)
Sidebar shows article sections