@bwagener/remark-slug
v4.2.4
Published
remark plugin to add anchors to headings
Downloads
4
Maintainers
Readme
remark-slug
Add anchors to remark heading nodes using GitHub’s algorithm.
:warning: This is often useful when compiling to HTML. If you’re doing that, it’s probably smarter to use
remark-rehype
andrehype-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 & 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 (thus creating GitHub style id
s).
Sets data.id
, data.hProperties.id
on heading nodes. The first can be
used by any plugin as a unique identifier, the second tells remark-html
to use its value as an id
attribute. remark-slug does not overwrite
these values when they already exist.
Related
rehype-slug
— Add slugs to headings in HTML