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 |