Add a table of contents (TOC) to your blog posts

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SonarQube - Static code analysis for 29 languages.
  • Scout APM - Less time debugging, more time building
  • SaaSHub - Software Alternatives and Reviews
  • jekyll-toc

    Jekyll plugin which generates a table of contents.

    Jekyll has the jekyll-toc plugin. I can vouch for this one, as I use it on an active website. It has excellent configuration options. It is one of the few I have seen where you can exclude individual headings within a page, so you can slim down the size of the table of contents.

  • eleventy 🕚⚡️

    A simpler static site generator. An alternative to Jekyll. Transforms a directory of templates (of varying types) into HTML.

    Eleventy has the eleventy-plugin-toc plugin.

  • SonarQube

    Static code analysis for 29 languages.. Your projects are multi-language. So is SonarQube analysis. Find Bugs, Vulnerabilities, Security Hotspots, and Code Smells so you can release quality code every time. Get started analyzing your projects today for free.

  • kramdown

    kramdown is a fast, pure Ruby Markdown superset converter, using a strict syntax definition and supporting several common extensions.

    The Kramdown markdown parser-converter that is used by Jekyll, has the ability to generate a TOC. If all is want is a TOC, it does the job.

  • Jekyll

    :globe_with_meridians: Jekyll is a blog-aware static site generator in Ruby

    Jekyll has the jekyll-toc plugin. I can vouch for this one, as I use it on an active website. It has excellent configuration options. It is one of the few I have seen where you can exclude individual headings within a page, so you can slim down the size of the table of contents.

  • Hugo

    The world’s fastest framework for building websites.

    Hugo has built-in support for adding a TOC.

  • browser-compat-data

    This repository contains compatibility data for Web technologies as displayed on MDN

    Elsewhere around the web, you may have seen a two column layout with the TOC in a sidebar. This is more common for documentation-centric websites like MDN web docs. They tend to hide the TOC for smaller screen sizes.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts