Skip to content

Anchor heading

The AnchorHeading component emulates the behaviour of the rehype-slug and rehype-autolink-headings plugins.

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.

This is only required when writing headings yourself inside components, Markdown (including partials) will have this applied via the aforementioned rehype plugins.

Foo & Bar & Baz

import { AnchorHeading } from "~/components"
<AnchorHeading title="Foo & Bar & Baz" depth={2} />