toc-generate v1.0.2

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