Package Exports

rehype-autolink-headings

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rehype-autolink-headings) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

rehype-slug

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, organisation, or community you agree to abide by its terms.