Skip to content

Update anchor-heading.mdx #29148

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
kodster28 wants to merge 2 commits into from
Closed

Update anchor-heading.mdx #29148

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
06f8591
Update anchor-heading.mdx
kodster28 Mar 19, 2026
fc6f70b
Apply suggestions from code review
kodster28 Mar 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/content/docs/style-guide/components/anchor-heading.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ The `AnchorHeading` component defines headings. Specifically, `AnchorHeading` pe
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.

```mdx live
```mdx
import { AnchorHeading } from "~/components";

<AnchorHeading title="How to use AnchorHeading" slug="use-anchorheading" depth={2} />
Expand All @@ -21,7 +21,7 @@ Markdown files (including partials) have this behavior by default, applied via r

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

```mdx live
```mdx
## foo {/*bar*/}
{/* HTML: <h2 id="bar">foo</h2> */}
```
Expand All @@ -30,4 +30,4 @@ To override the ID given to a heading within Markdown, add an MDX comment at the

The `AnchorHeading` component emulates the behavior of the [`rehype-slug`](https://github.com/rehypejs/rehype-slug) and the [`rehype-autolink-headings`](https://github.com/rehypejs/rehype-autolink-headings). It adds an `id` based on the output of [`github-slugger`](https://github.com/Flet/github-slugger/) to the heading, as well as adding a button to copy a link to that particular heading.

:::
:::
Loading