TOC Generate

| Create a table of contents for a HTML, ESModule

Demo

Demo Link

Usage

Script HTML

1. Include one of the link in to HTML

<script src="https://dunggramer.github.io/toc-generate/dist/toc-generate.js" defer></script>

<script src="https://gitcdn.xyz/cdn/DungGramer/toc-generate/master/dist/toc-generate.js" defer></script>

2. Call the function

 <script>
    document.addEventListener('DOMContentLoaded', function() {
        const tableOfContent = tocGenerate({
            contentWrapperSelector: "main",
            headingLevelFrom: 2,
            viewablePercentToHighlight: 70,
            showsHighLight: true,
            showsParentHighlight: true,
        });

        const tocSelector = document.querySelector("#toc");
        tocSelector.appendChild(tableOfContent);
    });
</script>

ESModule

npm i toc-generate
# or 
yarn add toc-generate

You may not use tocSelector if the content is not already displayed.

import tocGenerate from 'toc-generate';

const tableOfContent = tocGenerate({
    contentWrapperSelector: "main",
    headingLevelFrom: 2,
    viewablePercentToHighlight: 70,
    showsHighLight: true,
    showsParentHighlight: true,
});

const tocSelector = document.querySelector("#toc");
tocSelector.appendChild(tableOfContent);

API

Parameter	Type	Default	Description
contentWrapperSelector	string	'body'	The selector for the content wrapper
tocSelector	string	undefined	The selector for the TOC
headingLevelFrom	number	2	The heading level to start from
headingLevelTo	number	6	The heading level to stop at
showsHighLight	boolean	false	Whether to show the highlight
showsParentHighlight	boolean	false	Whether to keep the parent highlight, only works when showsHighLight is true
viewablePercentToHighlight	number	70	The viewable percent to highlight