remark-toc
!Buildbuild-badgebuild
!Coveragecoverage-badgecoverage
!Downloadsdownloads-badgedownloads
!Sizesize-badgesize
!Sponsorssponsors-badgecollective
!Backersbackers-badgecollective
!Chatchat-badgechatremark plugin to generate a table of contents.
Contents
* [`unified().use(remarkToc[, options])`](#unifieduseremarktoc-options)
* [`Options`](#options)
* [Example: a different heading](#example-a-different-heading)
* [Example: ordered, loose list](#example-ordered-loose-list)
* [Example: including and excluding headings](#example-including-and-excluding-headings)
* [Example: adding a prefix](#example-adding-a-prefix)
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
remark-rehype after this plugin.
Then it’s possible to use the rehype plugins rehype-slug
rehype-slug (for
IDs on headings) and rehype-autolink-headings
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
mdast-util-toc and
create a pluginunified-create-a-plugin yourself to do that and more.Install
This package is ESM onlyesm. In Node.js (version 16+), install with npm:npm install remark-toc
In Deno with
esm.sh
esmsh:import remarkToc from 'https://esm.sh/remark-toc@9'
In browsers with
esm.sh
esmsh:<script type="module">
import remarkToc from 'https://esm.sh/remark-toc@9?bundle'
</script>
Use
Say we have the following fileexample.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 isremarkToc
api-remark-toc.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
api-options, optional)
— configuration
Returns
Transform (Transformer
unified-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
fromunist-util-is
unist-util-is-test, 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`][rehype-sanitize]
Examples
Example: a different heading
The optionheading
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 optionsordered
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 optionsmaxDepth
, 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
Theprefix
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 typeOptions
api-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 ofremark-toc
involves user content and changes the tree, so it can open
you up for a cross-site scripting (XSS)wiki-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
— make sure that there is only one top-level heading by normalizing heading
ranks
– make some sections collapsible
– generate a contributors section
– generate a license section
– generate a dependencies section
– generate a usage section
Contribute
Seecontributing.md
contributing in remarkjs/.github
health for ways
to get started.
See support.md
support for ways to get help.This project has a code of conductcoc. By interacting with this repository, organization, or community you agree to abide by its terms.