The webdoc toc command

To generate a (clickable) table of contents (TOC) from the headings in your HTML document, you can use the webdoc toc command. Simply include the webdoc toc command at the position in the file where you want the TOC to appear. All relevant headings from this position on will be collected to construct the TOC. By default, webdoc toc collects three levels of headings, from <h1> to <h3>:

webdoc init, header(width(700px))
webdoc toc
/***
<h1>h1 heading</h1>
<h2>h2 heading</h2>
<h3>h3 heading</h3>
<h4>h4 heading</h4>
<h5>h5 heading</h5>
<h6>h6 heading</h6>
***/
Code
1.png

To collect, say, four levels from <h2> to <h5>, you could type webdoc toc 4 1. The first number specifies the number of desired levels, the second specifies the offset (i.e. how many upper levels to skip).

webdoc init, header(width(700px))
/***
<h1>Title</h1>
***/
webdoc toc 4 1
/***
<h2>h2 heading</h2>
<h3>h3 heading</h3>
<h4>h4 heading</h4>
<h5>h5 heading</h5>
<h6>h6 heading</h6>
***/
Code
2.png
[top]

Adding section numbers

To add automatic section numbers to the headings and the entries in the TOC you can specify the numbered option:

webdoc init, header(width(700px))
/***
<h1>Title</h1>
***/
webdoc toc 4 1, numbered
/***
<h2>Level one heading</h2>
<h3>Level two heading</h3>
<h4>Level three heading</h4>
<h5>Level four heading</h5>
<h6>Paragraph heading</h6>
***/
Code
3.png
[top]

Formatting the TOC

The numbers added by webdoc tocwill be tagged (as class="toc-secnum" in the TOC and as class="heading-secnum" in the headings), so they can be styled by CSS. Likewise, use CSS definitions for the <ul> tag to affect the look of the TOC. To prevent the definitions from spilling over to other instances of <ul> in the document, it is a good idea to wrap the TOC in an own class or include it in a <nav> tag. An example is as follows:

webdoc init, header(width(700px))

/***
<style>
.toc ul { list-style:none; padding-left:45px; text-indent:-45px; font-weight:bold; }
.toc ul ul { padding-left:0px; font-weight:normal; }
.toc-secnum, .heading-secnum { float:left; min-width:45px; }
h2, h3, h4 { padding-left:45px; text-indent:-45px; }
</style>
***/
      
/***
<h1>The Title</h1>
<p>Some leading text.</p>
***/

webdoc put <h4>Contents</h4>
webdoc put <div class="toc">
webdoc toc 3 1, numbered
webdoc put </div>

/*** 
<h2>A first section</h2>
<p>Some text.</p>
***/

/***
<h2>A second section</h2>
<p>Some text.</p>

<h3>A first subsection to the second section</h3>
<p>Some text.</p>

<h3>A second subsection to the second section</h3>
<p>Some text.</p>

<h4>A first subsection to the second subsection of the second section</h4>
<p>Some text.</p>
***/

/***
<h2>A final section</h2>
<p>Some text.</p>
***/
Code
4.png
[top]

Markdown headings

By default, webdoc toc only looks for HTML headings, that is, lines starting with <h1> to <h6>. Specify the md option, if you also want lines starting with # to ###### to be treated as headings, as in the following example:

webdoc init, header(width(700px))

/***
<style>
.toc ul { list-style:none; padding-left:45px; text-indent:-45px; font-weight:bold; }
.toc ul ul { padding-left:0px; font-weight:normal; }
.toc-secnum, .heading-secnum { float:left; min-width:45px; }
h2, h3, h4 { padding-left:45px; text-indent:-45px; }
</style>
***/
      
/***
<h1>The Title</h1>
***/

webdoc put <div class="toc">
webdoc toc 3 1, numbered md
webdoc put </div>

/*** 
## A first section
<p>Some text.</p>
***/

/***
## A second section
<p>Some text.</p>

### A first subsection to the second section
<p>Some text.</p>

### A second subsection to the second section
<p>Some text.</p>

#### A first subsection to the second subsection of the second section
<p>Some text.</p>
***/

/***
## A final section
<p>Some text.</p>
***/
Code
5.png