Author: | psalmody |
---|---|
Views Total: | 1,011 views |
Official Page: | Go to website |
Last Update: | September 9, 2020 |
License: | MIT |
Preview:

Description:
html-contents is a standalone JavaScript library which dynamically generates semantic, SEO-friendly, hierarchical table of contents from heading elements within your long document.
How to use it:
Create a container element to hold the table of content.
<div id="toc"> </div>
The library automatically generates anchor links from heading elements, you can customize the anchor names using the ID
attribute.
<h2 id="custom-anchor">Heading</h2>
Initialize the html-contents library and we’re done.
document.addEventListener("DOMContentLoaded", function(event) { htmlContents('#toc') })
Specify the min/max levels of headings.
htmlContents('#toc',{ // h2 top: 2, // h3 bottom: 3 })
Enable/disable anchor links within the table of contents.
htmlContents('#toc',{ addIds: true, addLinks: true })
Customize the list type. ‘u’ or ‘o’ – (u)nordered or (o)rdered list type.
htmlContents('#toc',{ listType: 'u' })
Ignore specific heading elements.
<h3 class="ignore">Heading</h3>
htmlContents('#toc',{ filter: '.ignore' })
Changelog:
v0.2.0 (2020-09-09)
- Allow multiple TOC inserts by using querySelectorAll
v0.1.7 (2019-09-17)
- Pass a string or function to filter option.
v0.1.6 (2019-07-12)
- better regex for header names, no console.log