remark-slug
remark plugin to add anchors to headings
Last updated 6 months ago by wooorm .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install remark-slug 
SYNC missed versions from official npm registry.

remark-slug

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.

Install

npm:

npm install remark-slug

Use

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)

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.

Security

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.

Related

Contribute

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.

License

MIT © Titus Wormer

Current Tags

  • 6.0.0                                ...           latest (6 months ago)

15 Versions

  • 6.0.0                                ...           6 months ago
  • 5.1.2                                ...           a year ago
  • 5.1.1                                ...           2 years ago
  • 5.1.0                                ...           2 years ago
  • 5.0.0                                ...           3 years ago
  • 4.2.3                                ...           3 years ago
  • 4.2.2                                ...           4 years ago
  • 4.2.1                                ...           4 years ago
  • 4.2.0                                ...           4 years ago
  • 4.1.1                                ...           4 years ago
  • 4.1.0                                ...           5 years ago
  • 4.0.0                                ...           5 years ago
  • 3.0.2                                ...           5 years ago
  • 3.0.1                                ...           5 years ago
  • 3.0.0                                ...           5 years ago
Maintainers (2)
Downloads
Today 89
This Week 1,409
This Month 6,108
Last Day 256
Last Week 1,620
Last Month 8,451
Dependencies (3)
Dev Dependencies (11)
Dependents (244)

Copyright 2014 - 2016 © taobao.org |