Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

gatsby-remark-toc

dschau250MITdeprecated1.2.0

This package exposed functionality that can be more easily implemented with gatsby-transformer-remark. See: https://www.gatsbyjs.org/packages/gatsby-transformer-remark/\#getting-table-of-contents

npm install gatsby-remark-toc --save

readme

Gatsby

gatsby-remark-toc

⚛️ 📄 :rocket:

Adds a table of contents to Markdown files using mdast-util-toc

Current TravisCI build status. Current npm package version. Downloads per month on npm.

🚀 Install

npm install gatsby-remark-toc --save

🎓 How to use

// in your gatsby-config.js
plugins: [
  {
    resolve: 'gatsby-transformer-remark',
    options: {
      plugins: [
        {
          resolve: 'gatsby-remark-toc',
          options: {
            header: 'Table of Contents', // the custom header text
            include: [
              'content/**/*.md' // an include glob to match against
            ]
          }
        }
      ]
    }
  }
];

If you want your table of contents to appear at a specific place in your Markdown file, use the reuseExistingHeader option:

// in your gatsby-config.js
plugins: [
  {
    resolve: 'gatsby-transformer-remark',
    options: {
      plugins: [
        {
          resolve: 'gatsby-remark-toc',
          options: {
            header: 'Table of Contents', // the custom header text
            reuseExistingHeader: true, // searches for `Table of Contents` in your Markdown file and adds the list right after it
            include: [
              'content/**/*.md' // an include glob to match against
            ]
          }
        }
      ]
    }
  }
];

Use the orderedList option if you want to change the list type from <ul> to <ol>.

Additionally, you can pass custom options directly to mdast-util-toc like so:

// in your gatsby-config.js
plugins: [
  {
    resolve: 'gatsby-transformer-remark',
    options: {
      plugins: [
        {
          resolve: 'gatsby-remark-toc',
          options: {
            header: 'Table of Contents', // the custom header text
            include: [
              'content/**/*.md' // an include glob to match against
            ],
            mdastUtilTocOptions: {
              maxDepth: 2
            }
          }
        }
      ]
    }
  }
];