Package Exports

remark-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 (remark-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

remark-autolink-headings

remark plugin to automatically add links to headings.

This package integrates with remark-html. It may be better to work with rehype, which is specifically made for HTML, and to use rehype-autolink-headings instead of this package.

Install

npm:

npm install remark-autolink-headings

Use

Say we have the following markdown file, example.md:

# Lorem ipsum 😪
## dolor—sit—amet
### consectetur &amp; adipisicing
#### elit
##### elit

And our script, example.js, looks as follows:

const fs = require('fs')
const unified = require('unified')
const markdown = require('remark-parse')
const html = require('remark-html')
const slug = require('remark-slug')
const headings = require('remark-autolink-headings')

const contents = unified()
  .use(markdown)
  .use(slug)
  // Note that this module must be included after `remark-slug`.
  .use(headings)
  .use(html)
  .processSync(fs.readFileSync('example.md'))
  .toString()

console.log(contents)

Now, running node example yields:

<h1 id="lorem-ipsum-"><a href="#lorem-ipsum-" aria-hidden="true"><span class="icon icon-link"></span></a>Lorem ipsum 😪</h1>
<h2 id="dolorsitamet"><a href="#dolorsitamet" aria-hidden="true"><span class="icon icon-link"></span></a>dolor—sit—amet</h2>
<h3 id="consectetur--adipisicing"><a href="#consectetur--adipisicing" aria-hidden="true"><span class="icon icon-link"></span></a>consectetur &#x26; adipisicing</h3>
<h4 id="elit"><a href="#elit" aria-hidden="true"><span class="icon icon-link"></span></a>elit</h4>
<h5 id="elit-1"><a href="#elit-1" aria-hidden="true"><span class="icon icon-link"></span></a>elit</h5>

API

`remark().use(autolinkHeadings[, options])`

Automatically add links to headings.

`options`

`options.behavior`

How to create links (string, default: 'prepend'). Pass 'prepend' to inject the link before the heading text, 'append' for a link after the heading text, and 'wrap' to wrap the whole heading text with the link. Note that supplying wrap will ignore any value defined by the content option.

`options.content`

hast nodes to insert in the link (Node|Children). By default, the following is used:

{
  type: 'element',
  tagName: 'span',
  properties: {className: ['icon', 'icon-link']}
}

`options.linkProperties`

Extra properties to set on the link (Object?). Defaults to {ariaHidden: true} when in 'prepend' or 'append' mode.

Contribute

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