rehype-slug
rehype plugin to add id
s to headings.
Install
npm:
npm install rehype-slug
Use
Say we have the following file, fragment.html
:
<h1>Lorem ipsum 😪</h1>
<h2>dolor—sit—amet</h2>
<h3>consectetur & adipisicing</h3>
<h4>elit</h4>
<h5>elit</h5>
And our script, example.js
, looks as follows:
var fs = require('fs')
var rehype = require('rehype')
var slug = require('rehype-slug')
rehype()
.data('settings', {fragment: true})
.use(slug)
.process(fs.readFileSync('fragment.html'), 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
rehype().use(slug)
Add id
properties to h1-h6 headings that don’t already have one.
Uses github-slugger to create GitHub style id
s.
Security
Use of rehype-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
remark-slug
— Add slugs to headings in markdown
Contribute
See contributing.md
in rehypejs/.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.