Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
rehype-autolink-headings
Advanced tools
The rehype-autolink-headings package is a plugin for the rehype ecosystem that automatically adds links to headings in HTML documents. This is particularly useful for generating anchor links for headings in markdown files that are converted to HTML, making it easier to navigate through long documents.
Basic Usage
This code demonstrates the basic usage of rehype-autolink-headings. It processes an HTML string containing headings and automatically adds anchor links to those headings.
const rehype = require('rehype');
const rehypeAutolinkHeadings = require('rehype-autolink-headings');
rehype()
.use(rehypeAutolinkHeadings)
.process('<h1>Title</h1><h2>Subtitle</h2>', function (err, file) {
if (err) throw err;
console.log(String(file));
});
Customizing Link Properties
This example shows how to customize the behavior of the links added to the headings. The 'behavior' option is set to 'wrap', which wraps the heading text with the anchor link.
const rehype = require('rehype');
const rehypeAutolinkHeadings = require('rehype-autolink-headings');
rehype()
.use(rehypeAutolinkHeadings, { behavior: 'wrap' })
.process('<h1>Title</h1><h2>Subtitle</h2>', function (err, file) {
if (err) throw err;
console.log(String(file));
});
Adding Custom Properties to Links
This example demonstrates how to add custom properties to the generated links. Here, a custom class name 'custom-class' is added to the anchor links.
const rehype = require('rehype');
const rehypeAutolinkHeadings = require('rehype-autolink-headings');
rehype()
.use(rehypeAutolinkHeadings, { properties: { className: 'custom-class' } })
.process('<h1>Title</h1><h2>Subtitle</h2>', function (err, file) {
if (err) throw err;
console.log(String(file));
});
remark-autolink-headings is a plugin for the remark ecosystem that adds links to headings in markdown documents. It is similar to rehype-autolink-headings but is used within the remark ecosystem, which is focused on processing markdown rather than HTML.
markdown-it-anchor is a plugin for the markdown-it parser that automatically adds anchor links to headings in markdown documents. It provides similar functionality to rehype-autolink-headings but is designed to work with the markdown-it parser.
gatsby-remark-autolink-headers is a Gatsby plugin that adds anchor links to headings in markdown files processed by Gatsby. It is similar to rehype-autolink-headings but is specifically designed for use within the Gatsby framework.
Automatically add links to headings (h1-h6) with rehype.
npm:
npm install rehype-autolink-headings
Say we have the following fragment:
<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');
var link = require('rehype-autolink-headings');
var doc = fs.readFileSync('fragment.html');
rehype()
.data('settings', {fragment: true})
.use(slug)
.use(link)
.process(doc, function (err, file) {
if (err) throw err;
console.log(String(file));
});
Now, running node example
yields:
<h1 id="lorem-ipsum-"><a aria-hidden="true" href="#lorem-ipsum-"><span class="icon icon-link"></span></a>Lorem ipsum 😪</h1>
<h2 id="dolorsitamet"><a aria-hidden="true" href="#dolorsitamet"><span class="icon icon-link"></span></a>dolor—sit—amet</h2>
<h3 id="consectetur--adipisicing"><a aria-hidden="true" href="#consectetur--adipisicing"><span class="icon icon-link"></span></a>consectetur & adipisicing</h3>
<h4 id="elit"><a aria-hidden="true" href="#elit"><span class="icon icon-link"></span></a>elit</h4>
<h5 id="elit-1"><a aria-hidden="true" href="#elit-1"><span class="icon icon-link"></span></a>elit</h5>
rehype().use(link[, options])
Adds links to headings (h1-h6) with an id
options
options.behavior
string
, default: prepend
— How to add a link:
'prepend'
and 'append'
inserts a link with content
in it respectively before or after the heading contents'wrap'
wraps a link around the current heading contents.options.properties
Object
, default: {}
if 'wrap'
, {ariaHidden: true}
otherwise
— Properties for the added link.
options.content
Node
or Array.<Node>
, default: a span
element with icon
and icon-link
classes — Content to add in link. Ignored if 'wrap'
FAQs
rehype plugin to add links to headings
The npm package rehype-autolink-headings receives a total of 262,029 weekly downloads. As such, rehype-autolink-headings popularity was classified as popular.
We found that rehype-autolink-headings 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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.