ToC creates a nicely structured table of contents by assigning IDs to your headings and linking to them. You can specify the min and max levels of headings, and whether it should be an unordered list, an ordered list, or some other wrapper tag should be used.
read full documentationFor config options, see the docs; we will leave everything on default for this example.
Our example page looks something like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 | # My Title text text text ## Subheading ### Sub-Subheading more text # Another title still more text |
Normally, the titles would simply convert to
1 | <h1>My Title</h1> |
and so on.
With ToC enabled, however,...
...the same markdown file will ouput to slightly different HTML:
1 2 3 4 5 6 7 | <h1 id="my-title">My Title</h1> <p>text text text</p> <h2 id="subheading">Subheading</h2> <h3 id="sub-subheading">Sub-Subheading</h3> <p>more text</p> <h1 id="another-title">Another Title</h1> <p>still more text</p> |
Additionally, if you include {{ toc }} anywhere in your jinja-template, it will be filled in with a nicely structured ToC:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="toc"> <ul> <li><a href="#my-title">My Title</a> <ul> <li><a href="#subheading">Subheading</a> <ul> <li><a href="#sub-subheading">Sub-Subheading</a></li> </ul> </li> </ul> </li> <li><a href="#another-title">Another Title</a></li> </ul> </div> |
Which looks like this:
