1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

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

    John OtanderJohn Otander
    javascriptJavaScript

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    John Otander: 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.

    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.

    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.

    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.

    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.

    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.

    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.