Skip to content
Add slugs to headings in remark
Branch: master
Clone or download
Latest commit c6c14f3 Nov 22, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.editorconfig Refactor code-style to use `xo` Aug 24, 2016
.gitignore Add `yarn.lock` to `.gitignore` Aug 13, 2018
.npmrc Add `.npmrc` Aug 13, 2018
.prettierignore Add `.prettierignore` Aug 13, 2018
.travis.yml
index.js Add support for using existing ids Aug 13, 2018
license
package.json 5.1.1 Nov 22, 2018
readme.md
test.js Fix tests Aug 13, 2018

readme.md

remark-slug

Build Coverage Downloads Chat Sponsors Backers

Add anchors to remark heading nodes using GitHub’s algorithm.

⚠️ 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.

Installation

npm:

npm install remark-slug

Usage

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')

unified()
  .use(markdown)
  .use(slug)
  .use(remark2rehype)
  .use(html)
  .process(fs.readFileSync('example.md'), function(err, file) {
    if (err) throw err
    console.log(String(file))
  })

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>

API

remark.use(slug)

Adds slugs to markdown headings.

Uses github-slugger, which creates GitHub-style slugs.

Sets data.id and data.hProperties.id on heading nodes. 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.

Related

Contribute

See contributing.md in remarkjs/remark for ways to get started.

This organisation has a Code of Conduct. By interacting with this repository, organisation, or community you agree to abide by its terms.

License

MIT © Titus Wormer

You can’t perform that action at this time.