remark-toc

What is remark-toc?

The remark-toc package is a plugin for the remark markdown processor that automatically generates a table of contents (TOC) for markdown documents. It scans the document for headings and creates a TOC based on those headings, which can be customized and inserted at a specified location in the document.

What are remark-toc's main functionalities?

Generate TOC

This feature allows you to generate a table of contents for a markdown document. The code sample demonstrates how to use the remark-toc plugin with the remark processor to automatically generate a TOC based on the headings in the document.

const remark = require('remark');
const toc = require('remark-toc');

remark()
  .use(toc)
  .process('# Title\n## Subtitle\n### Subsubtitle', function (err, file) {
    if (err) throw err;
    console.log(String(file));
  });

Custom TOC Heading

This feature allows you to customize the heading of the generated TOC. The code sample shows how to set a custom heading 'Table of Contents' for the TOC.

const remark = require('remark');
const toc = require('remark-toc');

remark()
  .use(toc, { heading: 'Table of Contents' })
  .process('# Title\n## Subtitle\n### Subsubtitle', function (err, file) {
    if (err) throw err;
    console.log(String(file));
  });

Custom TOC Depth

This feature allows you to limit the depth of the TOC. The code sample demonstrates how to generate a TOC that includes only headings up to the second level.

const remark = require('remark');
const toc = require('remark-toc');

remark()
  .use(toc, { maxDepth: 2 })
  .process('# Title\n## Subtitle\n### Subsubtitle', function (err, file) {
    if (err) throw err;
    console.log(String(file));
  });

Other packages similar to remark-toc

markdown-toc

The markdown-toc package generates a table of contents for markdown files. It is a standalone tool that can be used via the command line or as a library in Node.js. Unlike remark-toc, which is a plugin for the remark processor, markdown-toc is a more general-purpose tool that can be used independently of any specific markdown processor.

doctoc

The doctoc package is a command-line tool that generates a table of contents for markdown files. It is designed to be used as a standalone tool and can automatically update the TOC in place. Compared to remark-toc, doctoc is more focused on being a CLI tool and does not integrate directly with the remark processor.

README

remark-toc

remark plugin to generate a table of contents.

Contents

• What is this?
• When should I use this?
• Install
• Use
• API
  • unified().use(remarkToc[, options])
  • Options
• Examples
  • Example: a different heading
  • Example: ordered, loose list
  • Example: including and excluding headings
  • Example: adding a prefix
• Types
• Compatibility
• Security
• Related
• Contribute
• License

What is this?

This package is a unified (remark) plugin to generate a table of contents of the document such as the one above.

When should I use this?

This project is useful when authors are writing docs in markdown that are sometimes quite long and so would benefit from automated overviews inside them. It is assumed that headings define the structure of documents and that they can be linked to. When this plugin is used, authors can add a certain heading (say, ## Contents) to documents and this plugin will populate those sections with lists that link to all following sections.

GitHub and similar services automatically add IDs (and anchors that link-to-self) to headings. You can add similar features when combining remark with rehype through remark-rehype after this plugin. Then it’s possible to use the rehype plugins rehype-slug (for IDs on headings) and rehype-autolink-headings (for anchors that link-to-self).

This plugin does not generate a table of contents for the whole document or expose it to other plugins. You can use the underlying mdast utility mdast-util-toc and create a plugin yourself to do that and more.

Install

This package is ESM only. In Node.js (version 16+), install with npm:

npm install remark-toc

In Deno with esm.sh:

import remarkToc from 'https://esm.sh/remark-toc@9'

In browsers with esm.sh:

<script type="module">
  import remarkToc from 'https://esm.sh/remark-toc@9?bundle'
</script>

Use

Say we have the following file example.md:

# Pluto

Pluto is a dwarf planet in the Kuiper belt.

## Contents

## History

### Discovery

In the 1840s, Urbain Le Verrier used Newtonian mechanics to predict the
position of…

### Name and symbol

The name Pluto is for the Roman god of the underworld, from a Greek epithet for
Hades…

### Planet X disproved

Once Pluto was found, its faintness and lack of a viewable disc cast doubt…

## Orbit

Pluto’s orbital period is about 248 years…

…and a module example.js:

import {remark} from 'remark'
import remarkToc from 'remark-toc'
import {read} from 'to-vfile'

const file = await remark()
  .use(remarkToc)
  .process(await read('example.md'))

console.error(String(file))

…then running node example.js yields:

# Pluto

Pluto is a dwarf planet in the Kuiper belt.

## Contents

* [History](#history)
  * [Discovery](#discovery)
  * [Name and symbol](#name-and-symbol)
  * [Planet X disproved](#planet-x-disproved)
* [Orbit](#orbit)

## History

### Discovery

In the 1840s, Urbain Le Verrier used Newtonian mechanics to predict the
position of…

### Name and symbol

The name Pluto is for the Roman god of the underworld, from a Greek epithet for
Hades…

### Planet X disproved

Once Pluto was found, its faintness and lack of a viewable disc cast doubt…

## Orbit

Pluto’s orbital period is about 248 years…

API

This package exports no identifiers. The default export is remarkToc.

unified().use(remarkToc[, options])

Generate a table of contents (TOC).

Looks for the first heading matching options.heading (case insensitive), removes everything between it and an equal or higher next heading, and replaces that with a list representing the rest of the document structure, linking to all further headings.

Parameters

• options (Options, optional) — configuration

Returns

Transform (Transformer).

Options

Configuration (TypeScript type).

Fields

• heading (string, default: '(table[ -]of[ -])?contents?|toc') — heading to look for, wrapped in new RegExp('^(' + value + ')$', 'i')
• maxDepth (number, default: 6) — max heading depth to include in the table of contents; this is inclusive: when set to 3, level three headings are included (those with three hashes, ###)
• skip (string, optional) — headings to skip, wrapped in new RegExp('^(' + value + ')$', 'i'); any heading matching this expression will not be present in the table of contents
• parents (Test from unist-util-is, default: tree) — allow headings to be children of certain node types
• tight (boolean, default: true) — whether to compile list items tightly, otherwise space is added around items
• ordered (boolean, default: false) — whether to compile list items as an ordered list, otherwise they are unordered
• prefix (string, optional, example: 'user-content-') — add a prefix to links to headings in the table of contents; useful for example when later going from markdown to HTML and sanitizing with rehype-sanitize

Examples

Example: a different heading

The option heading can be set to search for a different heading. The example from before can be changed to search for different headings like so:

@@ -3,7 +3,7 @@ import remarkToc from 'remark-toc'
 import {read} from 'to-vfile'

 const file = await remark()
-  .use(remarkToc)
+  .use(remarkToc, {heading: 'structure'})
   .process(await read('example.md'))

 console.error(String(file))

…that would search for structure (case-insensitive) headings.

Example: ordered, loose list

The options ordered and tight can be toggled to change the list. The example from before can be changed to generate a tight, ordered list like so:

@@ -3,7 +3,7 @@ import remarkToc from 'remark-toc'
 import {read} from 'to-vfile'

 const file = await remark()
-  .use(remarkToc)
+  .use(remarkToc, {ordered: true, tight: false})
   .process(await read('example.md'))

 console.error(String(file))

…that would generate the following list:

1. [History](#history)

   1. [Discovery](#discovery)
   2. [Name and symbol](#name-and-symbol)
   3. [Planet X disproved](#planet-x-disproved)

2. [Orbit](#orbit)

Example: including and excluding headings

The options maxDepth, parents, and skip can be used to include and exclude certain headings from list. The example from before can be changed to only include level 1, 2, and 3 headings, to include headings directly in list items, and to exclude headings with the text delta (case-insensitive, full match):

@@ -3,7 +3,7 @@ import remarkToc from 'remark-toc'
 import {read} from 'to-vfile'

 const file = await remark()
-  .use(remarkToc)
+  .use(remarkToc, {maxDepth: 3, parents: ['listItem', 'root'], skip: 'delta'})
   .process(await read('example.md'))

 console.error(String(file))

Example: adding a prefix

The prefix option can set to prepend a string to all links to headings in the generated list:

@@ -3,7 +3,7 @@ import remarkToc from 'remark-toc'
 import {read} from 'to-vfile'

 const file = await remark()
-  .use(remarkToc)
+  .use(remarkToc, {prefix: 'user-content-'})
   .process(await read('example.md'))

 console.error(String(file))

…that would generate the following list:

* [History](#user-content-history)
  * [Discovery](#user-content-discovery)
  * [Name and symbol](#user-content-name-and-symbol)
  * [Planet X disproved](#user-content-planet-x-disproved)
* [Orbit](#user-content-orbit)

Types

This package is fully typed with TypeScript. It exports the additional type Options.

Compatibility

Projects maintained by the unified collective are compatible with maintained versions of Node.js.

When we cut a new major release, we drop support for unmaintained versions of Node. This means we try to keep the current release line, remark-toc@^9, compatible with Node.js 16.

This plugin works with unified version 3+ and remark version 4+.

Security

Use of remark-toc involves user content and changes the tree, so it can open you up for a cross-site scripting (XSS) attack.

Existing nodes are copied into the table of contents. The following example shows how an existing script is copied into the table of contents.

The following markdown:

# Contents

## Bravo<script>alert(1)</script>

## Charlie

Yields:

# Contents

-   [Bravo<script>alert(1)</script>](#bravoscriptalert1script)
-   [Charlie](#charlie)

## Bravo<script>alert(1)</script>

## Charlie

This may become a problem if the markdown is later transformed to rehype (hast) or opened in an unsafe markdown viewer.

Related

• remark-normalize-headings — make sure that there is only one top-level heading by normalizing heading ranks
• remark-collapse – make some sections collapsible
• remark-contributors – generate a contributors section
• remark-license – generate a license section
• remark-package-dependencies – generate a dependencies section
• remark-usage – generate a usage section

Contribute

See contributing.md in remarkjs/.github for ways to get started. See support.md for ways to get help.

This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.

License

MIT © Titus Wormer