Add a Dynamic Table of Contents to Your Markdown Documents with remark-toc

John Otander
InstructorJohn Otander
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

Manually maintaining a table of contents in markdown documents can be a lot of work. By combining remark-toc and remark-slug you can ensure generate your table of contents and ensure it's always up to date.

John Otander: [00:00] In order to generate a dynamic table of contents in our markdown document, we'll need to install the Remark Toc library. When that's complete we can begin editing our build script.

[00:10] As you can see we're currently invoking Remark and passing at the remark html plugin. We'll also need to require the Remark Toc plugin and pass it to Remark as well.

[00:20] Remark Toc uses a special heading in your document in order to know where to place the table of contents. We'll go ahead and add that.

[00:27] Now we can rerun our build with yarn start and refresh the html page. Our table of contents has been added and generated based off the headings in our document. However, the links do not work.

[00:43] If we inspect the table of contents links we see that there's a slugified ID that we're linking to. However, those IDs are not being added to the headings.

[00:53] In order to slugify our headings, we can use the Remark Slug plugin. After we yarn install the library, we can require it and then pass it to remark as well. After we run our build to the yarn start, we'll see that the h2 now has a slugified ID. This ensures that our table of contents links now work.

[01:12] Altogether, we used the remark Toc library to generate a dynamic table of contents based on headers. Then we used Remark Slug to slugify the headings. This results in a fully functional, linkable table of contents.

egghead
egghead
~ 36 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today