remark-gen-toc

A Remark plugin to generate a table of contents

Installation

npm install remark-gen-toc

Usage

Add the plugin to a remark chain:

import {unified} from 'unified'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import rehypeStringify from 'rehype-stringify'
import remarkToc from 'remark-gen-toc'

const tocOptions = {minDepth: 1, maxDepth: 4, className: 'toc'}
const {value} = unified().use(remarkParse).use(remarkToc, tocOptions).use(remarkRehype).use(rehypeStringify).processSync(md)
console.log(String(value))

Configuration

• minDepth – minimum heading depth to include (default: 1)
• maxDepth – maximum heading depth to include (default: 3)
• className – class added to the generated <ul> element (default: "table-of-contents")

Mark the insertion point

Add a paragraph with the content [[TOC]] to a markdown document to mark the location where the table of contents will be injected.

Example

Markdown

# Document Title

[[TOC]]

## Heading 1

Some content 1

## Heading 2

Some content 2

### Heading 2.1

Some content 2.1

### Heading 2.2

Some content 2.2

HTML

<h1>Document Title</h1>
<ul class="table-of-contents">
  <li><a href="#heading-1">Heading 1</a></li>
  <li>
    <a href="#heading-2">Heading 2</a>
    <ul>
        <li><a href="#heading-21">Heading 2.1</a></li>
        <li><a href="#heading-22">Heading 2.2</a></li>
    </ul>
  </li>
</ul>
<h2>Heading 1</h2>
<p>Some content 1</p>
<h2>Heading 2</h2>
<p>Some content 2</p>
<h3>Heading 2.1</h3>
<p>Some content 2.1</p>
<h3>Heading 2.2</h3>
<p>Some content 2.2</p>

Contributing

Contributions, issues, and feature requests are welcome!
Feel free to open an issue or submit a pull request.

Related

• remark-attrs – Add custom attributes to Markdown elements

License

MIT © Anatoly Nechaev