Project: remarkjs/remark-slug

Package: remark-slug@6.0.0

  1. Dependencies: 0·Dependents: 202
  2. remark plugin to add anchors to headings
  1. remark 188
  2. unified 165
  3. markdown 132
  4. plugin 128
  5. mdast 88
  6. remark-plugin 70
  7. text 17
  8. github 8
  9. id 3
  10. slug 2


Build Coverage Downloads Size Sponsors Backers Chat

remark plugin to add anchors headings using GitHub’s algorithm.

⚠️ Note: This is often useful when compiling to HTML. If you’re doing that, it’s probably smarter to use remark-rehype and rehype-slug and benefit from the rehype ecosystem.


This plugin is ready for the new parser in remark (remarkjs/remark#536). No change is needed: it works exactly the same now as it did previously!



npm install remark-slug


Say we have the following file, example.md:

# Lorem ipsum 😪

## dolor—sit—amet

### consectetur & adipisicing

#### elit

##### elit

And our script, example.js, looks as follows:

var fs = require('fs')
var unified = require('unified')
var markdown = require('remark-parse')
var slug = require('remark-slug')
var remark2rehype = require('remark-rehype')
var html = require('rehype-stringify')

  .process(fs.readFileSync('example.md'), function(err, file) {
    if (err) throw err

Now, running node example yields:

<h1 id="lorem-ipsum-">Lorem ipsum 😪</h1>
<h2 id="dolorsitamet">dolor—sit—amet</h2>
<h3 id="consectetur--adipisicing">consectetur &#x26; adipisicing</h3>
<h4 id="elit">elit</h4>
<h5 id="elit-1">elit</h5>



Add anchors headings using GitHub’s algorithm.

Uses github-slugger to creates GitHub-style slugs.

Sets data.id and data.hProperties.id on headings. The first can be used by any plugin as a unique identifier, the second tells mdast-util-to-hast (used in remark-html and remark-rehype) to use its value as an id attribute.


Use of remark-slug can open you up to a cross-site scripting (XSS) attack as it sets id attributes on headings. In a browser, elements are retrievable by id with JavaScript and CSS. If a user injects a heading that slugs to an id you are already using, the user content may impersonate the website.

Always be wary with user input and use rehype-sanitize.


See contributing.md in remarkjs/.github for ways to get started. See support.md for ways to get help.

This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.


MIT © Titus Wormer