npm i markdown-it-github-headings


:octocat: Add anchors and links to headings just like Github does

by Dan Flettre

2.0.1 (see all)License:ISCTypeScript:Built-In
npm i markdown-it-github-headings


Add GitHub style anchor tags to headers

npm travis standard


npm install markdown-it-github-headings


var md = require('markdown-it')()
  .use(require('markdown-it-github-headings'), options)

Options and Defaults

The defaults will make the heading anchors behave as close to how GitHub behaves as possible.

classNamename of the class that will be added to the anchor taganchor
prefixHeadingIdsadd a prefix to each heading ID. (see security note below)true
prefixif prefixHeadingIds is true, use this string to prefix each ID.user-content-
enableHeadingLinkIconsAdds the icon next to each headingtrue
linkIconIf enableHeadingLinkIcons is true, use this to supply a custom icon (or anything really)
resetSluggerreset the slugger counter between .render calls for duplicate headers. (See tests for example)true

Why should I prefix heading IDs?

When using user generated content, its possible to run into DOM Clobbering when heading IDs are generated. Since IDs are used by JavaScript and CSS, a user could craft a page that breaks functionality or styles. A good way to avoid clobbering is to add a prefix to every generated ID to ensure they cannot overlap with existing IDs.

If you have full control over the content, there is less of a risk, but be aware that strange bugs related to DOM Clobbering are still possible!

For more information, here are some good resources on the topic:

One solution is to write some client side JavaScript to force non-prefixed hashes to jump to prefixed anchors. This is how its handled on GitHub and npmjs.com.

Check out marky-deep-links for an example (works great with browserify or webpack).


Contributions welcome! Please read the contributing guidelines first.



No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

No reviews found
Be the first to rate