rehype-autolink-headings

What is rehype-autolink-headings?

The rehype-autolink-headings package is a plugin for the rehype ecosystem that automatically adds links to headings in HTML documents. This is particularly useful for generating anchor links for headings in markdown files that are converted to HTML, making it easier to navigate through long documents.

What are rehype-autolink-headings's main functionalities?

Basic Usage

This code demonstrates the basic usage of rehype-autolink-headings. It processes an HTML string containing headings and automatically adds anchor links to those headings.

const rehype = require('rehype');
const rehypeAutolinkHeadings = require('rehype-autolink-headings');

rehype()
  .use(rehypeAutolinkHeadings)
  .process('<h1>Title</h1><h2>Subtitle</h2>', function (err, file) {
    if (err) throw err;
    console.log(String(file));
  });

Customizing Link Properties

This example shows how to customize the behavior of the links added to the headings. The 'behavior' option is set to 'wrap', which wraps the heading text with the anchor link.

const rehype = require('rehype');
const rehypeAutolinkHeadings = require('rehype-autolink-headings');

rehype()
  .use(rehypeAutolinkHeadings, { behavior: 'wrap' })
  .process('<h1>Title</h1><h2>Subtitle</h2>', function (err, file) {
    if (err) throw err;
    console.log(String(file));
  });

Adding Custom Properties to Links

This example demonstrates how to add custom properties to the generated links. Here, a custom class name 'custom-class' is added to the anchor links.

const rehype = require('rehype');
const rehypeAutolinkHeadings = require('rehype-autolink-headings');

rehype()
  .use(rehypeAutolinkHeadings, { properties: { className: 'custom-class' } })
  .process('<h1>Title</h1><h2>Subtitle</h2>', function (err, file) {
    if (err) throw err;
    console.log(String(file));
  });

Other packages similar to rehype-autolink-headings

remark-autolink-headings

remark-autolink-headings is a plugin for the remark ecosystem that adds links to headings in markdown documents. It is similar to rehype-autolink-headings but is used within the remark ecosystem, which is focused on processing markdown rather than HTML.

markdown-it-anchor

markdown-it-anchor is a plugin for the markdown-it parser that automatically adds anchor links to headings in markdown documents. It provides similar functionality to rehype-autolink-headings but is designed to work with the markdown-it parser.

gatsby-remark-autolink-headers

gatsby-remark-autolink-headers is a Gatsby plugin that adds anchor links to headings in markdown files processed by Gatsby. It is similar to rehype-autolink-headings but is specifically designed for use within the Gatsby framework.

README

rehype-autolink-headings

rehype plugin to add links from headings back to themselves.

Contents

• What is this?
• When should I use this?
• Install
• Use
• API
  • unified().use(rehypeAutolinkHeadings[, options])
  • Behavior
  • Build
  • BuildProperties
  • Options
• Examples
  • Example: different behaviors
  • Example: building content with hastscript
  • Example: passing content from a string of HTML
  • Example: group
• Types
• Compatibility
• Security
• Related
• Contribute
• License

What is this?

This package is a unified (rehype) plugin to add links from headings back to themselves. It looks for headings (so <h1> through <h6>) that have id properties, and injects a link to themselves. Similar functionality is applied by many places that render markdown. For example, when browsing this readme on GitHub or npm, an anchor is added to headings, which you can share to point people to a particular place in a document.

unified is a project that transforms content with abstract syntax trees (ASTs). rehype adds support for HTML to unified. hast is the HTML AST that rehype uses. This is a rehype plugin that adds links to headings in the AST.

When should I use this?

This plugin is useful when you have relatively long documents, where you want users to be able to link to particular sections, and you already have id properties set on all (or certain?) headings.

A different plugin, rehype-slug, adds ids to headings. When a heading doesn’t already have an id property, it creates a slug from it, and adds that as the id property. When using both plugins together, all headings (whether explicitly with a certain id or automatically with a generate one) will get a link back to themselves.

Install

This package is ESM only. In Node.js (version 16+), install with npm:

npm install rehype-autolink-headings

In Deno with esm.sh:

import rehypeAutolinkHeadings from 'https://esm.sh/rehype-autolink-headings@7'

In browsers with esm.sh:

<script type="module">
  import rehypeAutolinkHeadings from 'https://esm.sh/rehype-autolink-headings@7?bundle'
</script>

Use

Say we have the following file example.html:

<h1>Solar System</h1>
<h2>Formation and evolution</h2>
<h2>Structure and composition</h2>
<h3>Orbits</h3>
<h3>Composition</h3>
<h3>Distances and scales</h3>
<h3>Interplanetary environment</h3>
<p>…</p>

…and our module example.js contains:

import {rehype} from 'rehype'
import rehypeAutolinkHeadings from 'rehype-autolink-headings'
import rehypeSlug from 'rehype-slug'
import {read} from 'to-vfile'

const file = await rehype()
  .data('settings', {fragment: true})
  .use(rehypeSlug)
  .use(rehypeAutolinkHeadings)
  .process(await read('example.html'))

console.log(String(file))

…then running node example.js yields:

<h1 id="solar-system"><a aria-hidden="true" tabindex="-1" href="#solar-system"><span class="icon icon-link"></span></a>Solar System</h1>
<h2 id="formation-and-evolution"><a aria-hidden="true" tabindex="-1" href="#formation-and-evolution"><span class="icon icon-link"></span></a>Formation and evolution</h2>
<h2 id="structure-and-composition"><a aria-hidden="true" tabindex="-1" href="#structure-and-composition"><span class="icon icon-link"></span></a>Structure and composition</h2>
<h3 id="orbits"><a aria-hidden="true" tabindex="-1" href="#orbits"><span class="icon icon-link"></span></a>Orbits</h3>
<h3 id="composition"><a aria-hidden="true" tabindex="-1" href="#composition"><span class="icon icon-link"></span></a>Composition</h3>
<h3 id="distances-and-scales"><a aria-hidden="true" tabindex="-1" href="#distances-and-scales"><span class="icon icon-link"></span></a>Distances and scales</h3>
<h3 id="interplanetary-environment"><a aria-hidden="true" tabindex="-1" href="#interplanetary-environment"><span class="icon icon-link"></span></a>Interplanetary environment</h3>
<p>…</p>

API

This package exports no identifiers. The default export is rehypeAutolinkHeadings.

unified().use(rehypeAutolinkHeadings[, options])

Add links from headings back to themselves.

Parameters

• options (Options, optional) — configuration

Returns

Transform (Transformer).

Notes

This plugin only applies to headings with ids. Use rehype-slug to generate ids for headings that don’t have them.

Several behaviors are supported:

• 'prepend' (default) — inject link before the heading text
• 'append' — inject link after the heading text
• 'wrap' — wrap the whole heading text with the link
• 'before' — insert link before the heading
• 'after' — insert link after the heading

Behavior

Behavior (TypeScript type).

Type

type Behavior = 'after' | 'append' | 'before' | 'prepend' | 'wrap'

Build

Generate content (TypeScript type).

Parameters

• element (Element) — current heading

Returns

Content (Array<Node> or Node).

BuildProperties

Generate properties (TypeScript type).

Parameters

• element (Element) — current heading

Returns

Properties (Properties).

Options

Configuration (TypeScript type).

Fields

• behavior (Behavior, default: 'prepend') — how to create links
• content (Array<Node>, Node, or Build, default: equivalent of <span class="icon icon-link"></span>) — content to insert in the link, if behavior is not 'wrap'
• group (Array<Node>, Node, or Build, optional) — content to wrap the heading and link with, if behavior is 'after' or 'before'
• properties (BuildProperties or Properties, default: {ariaHidden: true, tabIndex: -1} if 'append' or 'prepend', otherwise undefined) — extra properties to set on the link when injecting
• test (Test, optional) — extra test for which headings are linked

Examples

Example: different behaviors

This example shows what each behavior generates by default.

import {rehype} from 'rehype'
import rehypeAutolinkHeadings from 'rehype-autolink-headings'

const behaviors = ['after', 'append', 'before', 'prepend', 'wrap']
let index = -1
while (++index < behaviors.length) {
  const behavior = behaviors[index]
  console.log(
    String(
      await rehype()
        .data('settings', {fragment: true})
        .use(rehypeAutolinkHeadings, {behavior})
        .process('<h1 id="' + behavior + '">' + behavior + '</h1>')
    )
  )
}

Yields:

<h1 id="after">after</h1><a href="#after"><span class="icon icon-link"></span></a>
<h1 id="append">append<a aria-hidden="true" tabindex="-1" href="#append"><span class="icon icon-link"></span></a></h1>
<a href="#before"><span class="icon icon-link"></span></a><h1 id="before">before</h1>
<h1 id="prepend"><a aria-hidden="true" tabindex="-1" href="#prepend"><span class="icon icon-link"></span></a>prepend</h1>
<h1 id="wrap"><a href="#wrap">wrap</a></h1>

Example: building content with hastscript

The following example passes options.content as a function, to generate an accessible description specific to each link. It uses hastscript to build nodes.

import {h} from 'hastscript'
import {toString} from 'hast-util-to-string'
import {rehype} from 'rehype'
import rehypeAutolinkHeadings from 'rehype-autolink-headings'

const file = await rehype()
  .data('settings', {fragment: true})
  .use(rehypeAutolinkHeadings, {
    content(node) {
      return [
        h('span.visually-hidden', 'Read the “', toString(node), '” section'),
        h('span.icon.icon-link', {ariaHidden: 'true'})
      ]
    }
  })
  .process('<h1 id="pluto">Pluto</h1>')

console.log(String(file))

Yields:

<h1 id="pluto"><a aria-hidden="true" tabindex="-1" href="#pluto"><span class="visually-hidden">Read the “Pluto” section</span><span class="icon icon-link" aria-hidden="true"></span></a>Pluto</h1>

Example: passing content from a string of HTML

The following example passes content as nodes. It uses hast-util-from-html-isomorphic to build nodes from a string of HTML.

/**
 * @typedef {import('hast').ElementContent} ElementContent
 */

import {fromHtmlIsomorphic} from 'hast-util-from-html-isomorphic'
import {rehype} from 'rehype'
import rehypeAutolinkHeadings from 'rehype-autolink-headings'

const file = await rehype()
  .data('settings', {fragment: true})
  .use(rehypeAutolinkHeadings, {
    content: /** @type {Array<ElementContent>} */ (
      fromHtmlIsomorphic(
        '<svg height="10" width="10"><circle cx="5" cy="5" r="5" fill="black" /></svg>',
        {fragment: true}
      ).children
    )
  })
  .process('<h1 id="makemake">Makemake</h1>')

console.log(String(file))

Yields:

<h1 id="makemake"><a aria-hidden="true" tabindex="-1" href="#makemake"><svg height="10" width="10"><circle cx="5" cy="5" r="5" fill="black"></circle></svg></a>Makemake</h1>

Example: group

The following example passes group as a function, to dynamically generate a differing element that wraps the heading. It uses hastscript to build nodes.

import {h} from 'hastscript'
import {rehype} from 'rehype'
import rehypeAutolinkHeadings from 'rehype-autolink-headings'

const file = await rehype()
  .data('settings', {fragment: true})
  .use(rehypeAutolinkHeadings, {
    behavior: 'before',
    group(node) {
      return h('.heading-' + node.tagName.charAt(1) + '-group')
    }
  })
  .process('<h1 id="ceres">Ceres</h1>')

console.log(String(file))

Yields:

<div class="heading-1-group"><a href="#ceres"><span class="icon icon-link"></span></a><h1 id="ceres">Ceres</h1></div>

Types

This package is fully typed with TypeScript. It exports the additional types Behavior, Build, BuildProperties, and Options.

Compatibility

Projects maintained by the unified collective are compatible with maintained versions of Node.js.

When we cut a new major release, we drop support for unmaintained versions of Node. This means we try to keep the current release line, rehype-autolink-headings@^7, compatible with Node.js 16.

This plugin works with rehype-parse version 1+, rehype-stringify version 1+, rehype version 1+, and unified version 4+.

Security

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

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

Related

• rehype-slug — add ids to headings
• rehype-highlight — apply syntax highlighting to 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