Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
rehype-slug
Advanced tools
The rehype-slug npm package is a plugin for the rehype ecosystem, which is used to process HTML with plugins. This particular plugin automatically adds slugs (URL-friendly identifiers) to headings in HTML documents. These slugs can be used to create anchor links for easy navigation within the document, enhancing the usability and accessibility of web pages.
Automatic Slug Generation for Headings
This feature automatically generates slugs for each heading in an HTML document. The code sample shows how to use rehype with the rehype-slug plugin to process an HTML string containing a heading, adding an id attribute to the heading based on its content.
const rehype = require('rehype');
const rehypeSlug = require('rehype-slug');
rehype()
.use(rehypeSlug)
.process('<h1>Your Heading Here</h1>', function(err, file) {
console.log(String(file));
});
Similar to rehype-slug, remark-slug is a plugin but for the remark ecosystem, which is used for processing Markdown. It also generates slugs for headings in Markdown documents. While rehype-slug works on HTML, remark-slug is specifically tailored for Markdown, making it suitable for different types of content sources.
This Gatsby plugin automatically adds anchor links to headers in Markdown files processed through Gatsby's remark transformer. It is similar to rehype-slug in functionality but is specifically designed to integrate with the Gatsby static site generator, providing a more seamless experience for Gatsby users compared to using a general-purpose plugin like rehype-slug.
rehype plugin to add id
s to headings.
npm:
npm install rehype-slug
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>
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.
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
.
remark-slug
— Add slugs to headings in markdownSee 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.
FAQs
rehype plugin to add `id` attributes to headings
The npm package rehype-slug receives a total of 2,658,131 weekly downloads. As such, rehype-slug popularity was classified as popular.
We found that rehype-slug demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.