Automatically add links to headings with remark.
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.
npm:
npm install remark-autolink-headings
Say we have the following markdown file, example.md
:
# Lorem ipsum 😪
## dolor—sit—amet
### consectetur & 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 & 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>
Add links to headings.
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.
HAST nodes to insert in the link (Node|Children
).
By default, the following is used:
{
type: 'element',
tagName: 'span',
properties: {className: ['icon', 'icon-link']}
}
Extra properties to set on the link (Object?
).
Defaults to {ariaHidden: true}
when in 'prepend'
or 'append'
mode.
See contributing.md
in remarkjs/remark
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.