Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including rehype-autolink-headings with all npm packages installed. Try it out:

var rehypeAutolinkHeadings = require("rehype-autolink-headings")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

rehype-autolink-headings v2.0.4

Add links to headings in HTML


Build Coverage Downloads Chat

Automatically add links to headings (h1-h6) with rehype.



npm install rehype-autolink-headings


Say we have the following file, fragment.html:

<h1>Lorem ipsum 😪</h1>
<h3>consectetur &amp; adipisicing</h3>

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')

  .data('settings', {fragment: true})
  .process(doc, function(err, file) {
    if (err) throw err

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 &#x26; 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


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.

Object, default: {} if 'wrap', {ariaHidden: true} otherwise — Properties for the added link.


Node or Array.<Node>, default: a span element with icon and icon-link classes — Content to add in link. Ignored if 'wrap'



See in rehypejs/rehype for ways to get started.

This organisation has a Code of Conduct. By interacting with this repository, organisation, or community you agree to abide by its terms.


MIT © Titus Wormer

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free