markdown-it plugin to add toc and anchor links in headings
npm install markdown-it-toc-and-anchor> markdown-it plugin to add toc and anchor links in headings
``console`
$ yarn add markdown-it-toc-and-anchor
`js
import markdownIt from "markdown-it"
import markdownItTocAndAnchor from "markdown-it-toc-and-anchor"
markdownIt({
html: true,
linkify: true,
typographer: true,
})
.use(markdownItTocAndAnchor, {
// ...options
})
.render(md)
`
`js
var markdownIt = require('markdown-it'),
markdownItTocAndAnchor = require('markdown-it-toc-and-anchor').default;
markdownIt({
html: true,
linkify: true,
typographer: true,
})
.use(markdownItTocAndAnchor, {
// ...options
})
.render(md)
`
:information_source: Note that the 'default' property has to be used when requiring this plugin, this is due to the use of Babel 6 now making ES6 compliant exports (Misunderstanding ES6 Modules, Upgrading Babel, Tears, and a Solution
)
#### toc
(default: true)
Allows you to enable/disable the toc transformation of @[toc]
#### tocClassName
(default: "markdownIt-TOC")
Option to customize html class of the
wrapping the toc. If no class is wanted set to null.####
tocFirstLevel(default:
)Allows you to skip some heading level. Example: use 2 if you want to skip
from the TOC.####
(default:
)Allows you to skip some heading level. Example: use 5 if you want to skip
from the TOC.####
(default:
)Allows you to get toc contents externally by executing a callback function returning toc elements, in addition / instead of using @[toc] tag in content.
Example :
`
markdownIt({
html: true,
linkify: true,
typographer: true,
})
.use(markdownItTocAndAnchor, {
tocCallback: function(tocMarkdown, tocArray, tocHtml) {
console.log(tocHtml)
}
})
.render(md)
To allow callback to be more flexible, this option is also available in global markdown-it options, and in render environment.
Example :
##### Callback in global markdown-it options
var mdIt = markdownIt({
html: true,
linkify: true,
typographer: true,
})
.use(markdownItTocAndAnchor) ....
mdIt.set({
tocCallback: function(tocMarkdown, tocArray, tocHtml) {
console.log(tocHtml)
}
})
.render(md)
##### Callback in render environment
var mdIt = markdownIt({
html: true,
linkify: true,
typographer: true,
})
.use(markdownItTocAndAnchor) ....
mdIt
.render(md, {
tocCallback: function(tocMarkdown, tocArray, tocHtml) {
console.log(tocHtml)
}
})
####
(default:
)Allows you to enable/disable the anchor link in the headings
####
anchorLinkSymbol(default:
)Allows you to customize the anchor link symbol
####
anchorLinkSpace(default:
)Allows you to enable/disable inserting a space between the anchor link and heading.
####
anchorLinkSymbolClassName(default:
)Allows you to customize the anchor link symbol class name. If not null, symbol will be rendered as
anchorLinkSymbol.####
anchorLinkBefore(default:
)Allows you to prepend/append the anchor link in the headings
####
anchorLinkPrefix(default:
)Allows you to add a prefix to the generated header ids, e.g.
section-.####
anchorClassName(default:
)Allows you to customize the anchor link class. If no class is wanted set to
null.####
wrapHeadingTextInAnchor(default:
)Makes the entire heading into the anchor link (takes precedence over
anchorLinkSymbol and anchorLinkBefore)####
resetIds(default:
)Allows you to reset (or not) ids incrementation. Use it if you will have multiple
documents on the same page.
####
slugify package)Allows you to customize the slug function that create ids from string.
Ex:
`js
// ...
slugify : string => /some/prefix/${string.replace(/(\/| |')/g, "_")}
// ...
---
CONTRIBUTING
* ⇄ Pull requests and ★ Stars are always welcome.
* For bugs and feature requests, please create an issue.
* Pull requests must be accompanied by passing automated tests (