A table of contents plugin for Markdown-it
Clone or download
Latest commit 545e86b Aug 17, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test Adding support for container header and footer HTML (#32) Aug 13, 2018
.gitignore Initial commit May 18, 2015
LICENSE Initial commit May 18, 2015
README.md Adding support for container header and footer HTML (#32) Aug 13, 2018
index.js Fixing github issue #35 (#36) Aug 17, 2018
package-lock.json Fix vulnerability (#30) Jun 30, 2018
package.json 0.4.3 Aug 17, 2018

README.md

markdown-it-table-of-contents

A table of contents plugin for Markdown-it. Simple, customizable and with a default slugifier that matches that of https://www.npmjs.com/package/markdown-it-anchor (>5.0.0).

Usage

var MarkdownIt = require("markdown-it");
var md = new MarkdownIt();

md.use(require("markdown-it-anchor")); // Optional, but makes sense as you really want to link to something
md.use(require("markdown-it-table-of-contents"));

Then add [[toc]] where you want the table of contents to be added in your markdown.

Example markdown

This markdown:

# Heading

[[toc]]

## Sub heading 1
Some nice text

## Sub heading 2
Some even nicer text

... would render this HTML using the default options specified in "usage" above:

<h1 id="heading">Heading</h1>

<div class="table-of-contents">
  <ul>
    <li><a href="#heading">Heading</a>
      <ul>
        <li><a href="#sub-heading-1">Sub heading 1</a></li>
        <li><a href="#sub-heading-2">Sub heading 2</a></li>
      </ul>
    </li>
  </ul>
</div>

<h2 id="sub-heading-1">Sub heading 1</h2>
<p>Some nice text</p>

<h2 id="sub-heading-2">Sub heading 2</h2>
<p>Some even nicer text</p>

Options

You may specify options when useing the plugin. like so:

md.use(require("markdown-it-table-of-contents"), options);

These options are available:

Name Description Default
"includeLevel" Headings levels to use (2 for h2:s etc) [1, 2]
"containerClass" The class for the container DIV "table-of-contents"
"slugify" A custom slugification function encodeURIComponent(String(s).trim().toLowerCase().replace(/\s+/g, '-'))
"markerPattern" Regex pattern of the marker to be replaced with TOC /^\[\[toc\]\]/im
"listType" Type of list (ul for unordered, ol for ordered) ul
"format" A function for formatting headings (see below) undefined
"forceFullToc" If true, renders all the headers in TOC, even if the headers are in incorrect order false
"containerHeaderHtml" Optional HTML string for container header <div class="toc-container-header">Contents</div>
"containerFooterHtml" Optional HTML string for container footer <div class="toc-container-footer">Footer</div>

format is an optional function for changing how the headings are displayed in the TOC.

function format(headingAsString) {
  // manipulate the headings as you like here.
  return manipulatedHeadingString;
}