Minimalist table of contents generator for Markdown generated HTML.
tocify will scan the content of the document and extract the heading (h1
, h2
, etc.) until it reaches the toc_max_depth
limit.
The script will generate anchors for each header element and add a reference the heading element in the table of contents.
tocify assumes that the heading are well structured and the nesting is implied based on the level of the heading element. That means that if you have a structure such as:
<h1>Main</h1>
<h2>Child 1</h2>
<h2>Child 2</h2>
The generated TOC will be like this:
- Main
- Child 1
- Child 2
However, if the structure is not consistent:
<h1>Root</h1>
<h2>Root Child</h2>
<h1>Main</h1>
<h3>Child 1</h3>
<h2>Child 2</h2>
The Child 1
element will be attached to a previous h2
element, which is Root Child
in this example.
There is currently no attempt to detect collisions between generated heading slugs.
tocify uses jQuery and Bootstrap CSS.
Set the variables to locate the document source and TOC destination:
toc_root
: destination of the TOCtoc_document_root
: the main container of the documenttoc_max_depth
: maximum depth of the headers to retrieve (default: 3)
Then, just include the tocify.js
script at the end of your HTML document:
<script src="/path/to/tocify.js" type="text/javascript"></script>
An anchor is generated for each header element and appended to the header content. You can customize it using CSS:
a.toc-anchor-char {
margin-left: 5px;
padding-left: 5px;
padding-right:5px;
color: #ddd;
}
a.toc-anchor-char:hover {
color: #363636;
}
@media print {
a.toc-anchor-char {
display: none;
}
}
You can find me on twitter @rgaucher