gatsby-remark-toc-heading
<p align="center"> <a href="https://next.gatsbyjs.org"> <img alt="Gatsby" src="https://www.gatsbyjs.org/monogram.svg" width="60" /> </a> </p> <h1 align="center"> gatsby-remark-toc-heading </h1>
Last updated a year ago by didu94 .
MIT · Original npm · Tarball · package.json
$ cnpm install gatsby-remark-toc-heading 
SYNC missed versions from official npm registry.

Gatsby

gatsby-remark-toc-heading

⚛️ ???? :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.

???? Fork change

Create ID for heading, so U can click toc Link Jump to heading postion.

???? Install

npm install gatsby-remark-toc-heading --save

???? How to use

// in your gatsby-config.js
plugins: [
  {
    resolve: 'gatsby-transformer-remark',
    options: {
      plugins: [
        {
          resolve: 'gatsby-remark-toc-heading',
          options: {
            header: {
              text: 'Table of Contents', // the custom header text
              depth: 2 // the custom depth of header
            },
            /**
             * or, alternatively, you can only specify header text
             * this way, depth will be set to 2 by default
             */
            // header: 'Table of Contents',
            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-heading',
          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>.

Meanwhile, you can specify a wrapper container for table of contents:

// in your gatsby-config.js
plugins: [
  {
    resolve: 'gatsby-transformer-remark',
    options: {
      plugins: [
        {
          resolve: 'gatsby-remark-toc-heading',
          options: {
            header: 'Table of Contents', // the custom header text
            wrapper: {
              name: 'aside', // tagName of wrapper component
              properties: {
                // attributes of wrapper component
                class: 'custom-class-here'
                // you can add more here, such as aria-hidden: true, etc.
              }
            },
            // or, alternatively you can simply pass a string here, which will be used as tagName
            // wrapper: 'aside',
            include: [
              'content/**/*.md' // an include glob to match against
            ]
          }
        }
      ]
    }
  }
];

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-heading',
          options: {
            header: 'Table of Contents', // the custom header text
            include: [
              'content/**/*.md' // an include glob to match against
            ],
            mdastUtilTocOptions: {
              maxDepth: 2
            }
          }
        }
      ]
    }
  }
];

Current Tags

  • 1.2.2                                ...           latest (a year ago)

2 Versions

  • 1.2.2                                ...           a year ago
  • 1.2.1                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependencies (2)
Dev Dependencies (9)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |