1. Automatic Table of Content generation
For a lengthy MarkDown document containing numerous headings and subheadings, it can be a bit difficult to navigate in the document for the reader. We have provided a method for the automatic generation of a Table of Contents section in your document.
Any place you like your Table of Content, you can simply include the text –––TOC––– (three dashes on each side of TOC).
When you press the preview button the routines creates a temporary copy of your markdown file and modifies it to include the TOC. Then it finds all the Hashtag-headings in the document and creates the TOC. It inserts anchors in the headings and has the TOC point to those anchors. I also added section numbering to the headings and a clickable up-arrow at the end of the heading for ease of navigating to the top of the document. The section numbering is automatic and helps correlate the headings to the TOC.
1.1. Example ↑
The TOC for this document looks like this after inserting this into the document where we want the TOC:
–––TOC–––
1.2. Special notes to TOC usage. ↑
The document must contain at least one Heading-1 type heading. Otherwise, the Tok will be indented one tab, which means that it comes as a code block instead and the links in it will not be clickable.
The document should be structured with Heading-1, Heading-2, and Heading-3 in a sequence. If you jump from Heading-1 to Heading-3, without any Heading-2 in between the numbering and the layout for the TOC becomes wrong. It can be tempting to do that just to make the size of the font in the headings match your preferences. If that is needed, you can edit the CSS file, with respect to the h1, h2, and h3 to reflect the font size of your liking.
1.2.1. Editing the style ↑
The file include/css/style.css in the root folder contains this:
h1 {
font-size: 3em;
font-weight: bold;
}
h2 {
font-size: 2em;
}
When you preview your document, you can edit this file and press refresh in your browser to see the effects immediately.
For editing CSS, any text editor can be used, but for my preference, I like Espresso which has a right sidebar where you can put the parameters for the CSS, not needing to remember everything. It also has a mode where you can edit your CSS and see live updates on the screen.