Skip to content
Add links to headings in HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
.editorconfig
.gitignore
.npmrc
.prettierignore
.travis.yml
index.js
license
package.json
readme.md

readme.md

rehype-autolink-headings

Build Coverage Downloads Chat

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

Installation

npm:

npm install rehype-autolink-headings

Usage

Say we have the following file, fragment.html:

<h1>Lorem ipsum 😪</h1>
<h2>dolor—sit—amet</h2>
<h3>consectetur &amp; 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 &#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>

API

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'

Related

Contribute

See contributing.md 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.

License

MIT © Titus Wormer

You can’t perform that action at this time.