rehype-autolink-headings

rehype plugin to automatically add links to headings (h1-h6).

Install

npm:

npm install rehype-autolink-headings

Use

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

Add links to headings (h1-h6) with an id.

options

options.behavior

How to add a link (string, default: prepend). Can be:

• 'prepend' and 'append' — insert a link with content in it respectively before or after the heading contents
• 'wrap' — wrap a link around the current heading contents

options.properties

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

options.content

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

Security

Use of rehype-autolink-headings can open you up to a cross-site scripting (XSS) attack if you pass user provided content in properties or content.

Always be wary of user input and use rehype-sanitize.

Related

• rehype-slug — Add ids to headings
• rehype-highlight — Syntax highlight code blocks
• rehype-toc — Add a table of contents (TOC)

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.

License

MIT © Titus Wormer

Current Tags

• 6.1.1                                ...           latest (4 years ago)

4 Versions

• 4.0.0                                ...           5 years ago
• 6.1.1                                ...           4 years ago
• 3.0.0                                ...           5 years ago
• 2.0.5                                ...           6 years ago