DiscoTOC Tutorial | automatic table of contents

[lucaviness]

Background

After a few months away from the forum, I am pleased to see on my return that a long-requested feature (original topic linked below) has been added: DiscoTOC. I am a formatter at heart, so this is quite exciting. TOC stands for Table of Contents and that’s exactly what DiscoTOC makes. Gone are the days of creating in-post links to headings manually because this feature is fully automated. Your only job is to have syntactically correct heading usage. If you don’t know what that is, no problem; I’ll teach you.

DiscoTOC - automatic table of contents | theme component request

Hi all! I’m coming to you today with a feature request that could greatly improve how we use this forum. DiscoTOC is a theme component that allows you to generate an interactive table of contents for your topics with one click! An example of this theme component can be found here. Here is the repository link. Features toc = table of contents Automatically generates the entire toc via a button in the composer gear menu The toc will always be on the screen As you scroll past sections in the t…

Remember this, @Chris_S?

Use Cases

DiscoTOC is best used with long-form content to create better organization for readers. A primary example of this on our forum is topics made under #ground-school:community-tutorials.

Tutorial

The simplest way to create headings in the editor window is to use hashtags (#). Below, I’ll write out heading sizes 1-6 and how to create each one.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

---

Headings can also be nested which will nests the table of contents as well. Nesting occurs when you have sub-headings under main headings.

Nested Headings Example

Plane Manufacturers and their Planes

Airbus

A320

A380

Boeing

B747

B777

---

As long as your headings go in order (i.e. no skipping from Heading 1 to Heading 3), your topic will be ready to go for DiscoTOC. Note that you can start on whichever heading level you want, but you must go in order from there. For instance, in this topic I started at Heading 2.

Now, click the gear icon in the editor window and click “Insert table of contents.”

A line will be inserted into your topic that looks like this:

<div data-theme-toc="true"> </div>

At the top of the window that displays what your topic looks like, a blue strip will appear as confirmation:

Once you click “+ Create Topic” to post your work, a table of contents will automatically appear on the right-hand side of the page. If all goes well, there will be one on this topic as an example.

Notes

– Hovering over a heading once posted will display a link icon; right click it to be able to copy the address to that individual heading. For example, check out DiscoTOC’s use cases.
– As a reader, when scrolling, the active heading (the one you’re currently viewing) will be highlighted in the table of contents on the right.
– There is a down arrow in the table of contents to skip to the bottom of the topic.
– DiscoTOC can’t be used in private messages.