Markdown to HTML Converter Logo

9 May 2024 ~ 8 min read

How to Create a Table of Contents in Markdown


Did you know that nearly 90% of readers say they prefer content that includes a clear and accessible Table of Contents (TOC)? Whether you’re drafting documentation, writing a technical blog, or organizing notes, a TOC in Markdown can be a game-changer. Yet, many are unaware of the simple methods available to create a dynamic and visually appealing TOC.

Welcome to your go-to guide for mastering Table of Contents in Markdown. Here, you’ll discover straightforward techniques to enhance your documents and streamline navigation for your readers.

Key Takeaways:

  • Built-in Directives: Learn how to use native Markdown commands to generate a TOC effortlessly.

  • Plugins & Scripts: Explore powerful tools and plugins for editors like Emacs and Vim to automate TOC creation.

  • Command Palettes: Find out how to leverage command palettes for quick TOC generation in various text editors.

  • Tools & Extensions: Utilize tools like pandoc and Typora for advanced TOC features.

  • Tips & Best Practices: Get insights on making your TOC not only functional but also aesthetically pleasing.

  • Automated TOC in Bitbucket: Discover the convenience of the [TOC] tag in Bitbucket repositories.

  • Custom Scripts: Implement simple bash scripts or use the {{TOC}} macro in MultiMarkdown for personalized TOC solutions.

Join us as we unpack these techniques and empower your Markdown documents with the clarity and professionalism that a well-structured Table of Contents provides. Dive in and transform your Markdown experience today!

#Creating a TOC

Creating a table of contents (TOC) in Markdown can be achieved through various methods, each with its unique advantages. Below are detailed steps for both manual and automated approaches:

Manual Method

  1. Use Headings: Utilize Markdown’s headings (H1 to H6) to outline your content. This method involves manually creating a nested list.

# Table of Contents

- [Introduction](#introduction)

- [Chapter 1](#chapter-1)

- [Section 1.1](#section-1-1)

- [Section 1.2](#section-1-2)

- [Chapter 2](#chapter-2)
  1. Create Links: Ensure each entry in the TOC links to the corresponding section by using anchor links. For example, [Introduction](#introduction).

Advantages

  • Complete control over TOC structure.

  • Can be customized to include or exclude specific sections.

Disadvantages

  • Time-consuming, especially for large documents.

  • Requires manual updates if the document structure changes.

Automated Method: VSCode Markdown All-in-One Extension

  1. Install the Extension: Install the “Markdown All in One” extension from the VSCode marketplace.

  2. Generate TOC:

  • Open the command palette (Ctrl+Shift+P).

  • Type and select “Markdown All in One: Create Table of Contents.”

  • The extension will automatically generate and insert a TOC based on your headings.

  1. Auto-Update TOC: The extension can auto-update the TOC upon saving the file, ensuring it remains current with document changes.

Advantages

  • Quick and efficient TOC generation.

  • Automatically updates with changes, minimizing maintenance.

Disadvantages

  • Requires using VSCode.

  • Limited customization options compared to the manual method.

Using Plugins and Tools

Pandoc

  1. Install Pandoc: Ensure Pandoc is installed on your system.

  2. Generate TOC: Use the command pandoc --toc -o output.html input.md to convert your Markdown file to HTML with an embedded TOC.

Emacs with markdown-mode

  1. Install markdown-mode: Ensure you have the markdown-mode package installed.

  2. Generate TOC: Use the markdown-toc-generate-toc command within Emacs to insert a TOC.

Vim with vim-markdown-toc Plugin

  1. Install Plugin: Add plasticboy/vim-markdown to your Vim plugin manager.

  2. Generate TOC: Use the :GenTocGFM command to generate a GitHub Flavored Markdown TOC.

#Suppressing TOC detection

To prevent a table of contents (TOC) from being automatically generated in a Markdown document, there are several methods you can use. These methods vary depending on the tools or platforms you’re using to render the Markdown file.

Methods to Suppress TOC Detection

1. Disable TOC Generation in Markdown Processors

Many Markdown processors and editors allow you to configure settings to disable TOC generation. For instance:

  • VSCode with Markdown All in One Extension: This popular extension allows users to generate TOCs automatically. You can disable this feature by modifying the settings.

{

"markdown.extension.toc.updateOnSave": false

}
  • Markdown-it: A JavaScript Markdown parser. You can disable the TOC plugin if it’s enabled.

const md = require('markdown-it')();

md.disable('toc');

2. Use Specific Markup or Comments

Some Markdown processors interpret special comments or markup to prevent TOC generation. For example:

  • Markdown All in One: This extension recognises a specific comment to disable TOC:

<!-- TOC disable:true -->
  • MkDocs: If you’re using MkDocs, you can exclude the TOC by setting a flag in the YAML configuration.

extra:

toc: false

3. Remove or Avoid TOC Syntax

Ensure that the document does not include the TOC-specific syntax that triggers automatic TOC generation. Common triggers include:

  • Headers with TOC tags.

<!-- TOC -->
  • Special notations recognized by some Markdown engines.

[[_TOC_]]

4. Use CSS to Hide TOC

In environments where you cannot modify the Markdown processing settings, you can hide the TOC using CSS. This is particularly useful for web-based renderers.

  • Example:

<style>

.toc { display: none; }

</style>

5. Adjusting YAML Front Matter

For static site generators like Jekyll or Hugo, modify the YAML front matter to control TOC behavior.

  • Jekyll:

---

toc: false

---
  • Hugo:

---

toc: false

---

Hiding headings from TOC

To hide headings from a table of contents in Markdown, you can add the “unlisted” and “unnumbered” classes to those specific headings. This will prevent them from appearing in the table of contents.

For example, if you have a heading that you want to exclude from the table of contents, you would format it as follows:


# My Heading {.unlisted .unnumbered}

This solution is particularly useful for RMarkdown files that are converted into PDF format. It has been addressed in a GitHub issue and is also mentioned in the R Markdown Cookbook.

However, it is important to note that this solution may not work for all Markdown processors. Some may have different methods for excluding headings from a table of contents. Therefore, it is crucial to do your own research and explore different options to find the best solution for your specific needs.

Additionally, there may be some cases where you want to exclude certain headings from the table of contents, but still want them to be numbered. In such cases, you can use the “unlisted” class alone, without the “unnumbered” class.

Section numbering

The correct way to number sections in a Markdown formatted article is to use headings, sections, and subsections. This allows for a clear and structured layout of the article, making it easier for readers to navigate through the content. Using the markdown language, headings and sections can be numbered and displayed in a Table of Contents (TOC). This is especially useful for longer articles where readers may want to jump to specific sections.

For subsections, a decimal system can be used, such as 1.1 or 1.2. This further breaks down the content and provides a more organized hierarchy. It also allows for flexibility in formatting, as subsections can be added or removed without disrupting the numbering system.

It is important to do thorough research when formatting articles in Markdown, as there may be variations in how different processors handle section numbering. For example, adding the “unlisted” and “unnumbered” classes may work for some processors but not for others. It is advisable to test and explore different options to find the best solution for your specific needs.

Additionally, it is worth considering other elements that may affect the numbering of sections in Markdown, such as excluding specific headings from the TOC using classes like “unlisted” and “unnumbered”. This can be a useful solution for RMarkdown files converted to PDF format, but may not work for all processors.

Conclusion

In conclusion, creating a table of contents in Markdown is an essential skill for any content creator. It not only improves the readability and accessibility of your documents, but it also enhances the overall professionalism of your work. With nearly 90% of readers preferring content with a clear TOC, it’s crucial to master this technique.

Through this comprehensive guide, we have explored various methods for creating a dynamic and visually appealing TOC in Markdown. From built-in directives to plugins and tools, there are multiple options available to suit your specific needs and preferences. We have also discussed tips and best practices for making your TOC functional and aesthetically pleasing.

Whether you’re drafting documentation, writing a technical blog, or organizing notes, a well-structured TOC can be a game-changer.


Jacqueline M. Leonard

Hi, my name is Jacqueline M. Leonard. I am the main developer and editor of markdowntohtmlgenius.com. Markdown to HTML Genius offers an amazing and easy-to-use tool for converting Markdown to HTML.