Page table of contents

Add a table of contents (TOC) automatically to any markdown page.

You'll notice it on this page on the right-side of the page.

This page will explain:

1. How the content is sourced for the TOC
2. How to enable or disable the TOC globally
3. How to override any setting for any specific page(s)

Global TOC setting

Enable the TOC on all pages by adding this to the siteConfig.yaml file:

enableToc: true

The TOC is disabled by default. If you want to disable it explicitly, add this to the siteConfig.yaml:

enableToc: false

TOC maximum depth

You may also control the maximum depth of the TOC. This means if it will render h1, h2, h3, h4, h5, h6, etc...

Set it using a numeric value corresponding to the header level.

The developer portal defaults to a tocMaxDepth of 4, meaning it will render h1, h2, h3, and h4 tags (except for the initial h1).

tocMaxDepth: 3

It may be adjusted within the siteConfig.yaml or in the front matter of any page.

Local TOC overrides

You may override the global setting in the front matter of a markdown-based page:

---
enableToc: false
---

---
enableToc: true
---

You may augment other front matter, by adding a new line.

---
title: Markdown example
description: GitHub-Flavored Markdown example
enableToc: true
---

TOC Content Source

The content of the TOC is sourced from the h2, h3, and h4 tags on the page.

It is also sourced from any additional h1 tags excluding an opening h1 tag.

A second h1 example

An h2 example

An h3 example

The h3 content will appear indented.

And an h4 example

The h4 content will appear further indented.

And an h5 too

The h5 content will not appear in the page table of contents.