gatsby-remark-toc-heading
v1.2.2
Published
<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>
Downloads
2
Readme
🎓 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
}
}
}
]
}
}
];