Anchor heading

The AnchorHeading component defines headings. Specifically, AnchorHeading performs the following:

1. Generates URL fragments corresponding to headings.
2. Formats URL fragments into compatible syntax. For example, a & is replaced with a -.
3. Creates a button to copy the URL at each fragment.
4. Allows heading fragments to be defined separately from the text of the heading itself.

How to use AnchorHeading

import { AnchorHeading } from "~/components";

<AnchorHeading title="How to use AnchorHeading" slug="use-anchorheading" depth={2} />

Markdown files (including partials) have this behavior by default, applied via rehype plugins. Therefore, the AnchorHeading component is usually only required when writing headings yourself inside components, or when working on non-markdown files.

To override the ID given to a heading within Markdown, add an MDX comment at the end of the line:

# foo {/*bar*/}

It will result in the following HTML:

<a id="bar">foo</a>

Note

The AnchorHeading component emulates the behavior of the rehype-slug ↗ and the rehype-autolink-headings ↗. It adds an id based on the output of github-slugger ↗ to the heading, as well as adding a button to copy a link to that particular heading.