#Is there a way to override the getHeadings() function?

4 messages · Page 1 of 1 (latest)

leaden bane
#

I use rehype-autolink-headings in conjunction with the native rehypeHeadingIds() from @astrojs/markdown-remark to generate a link inside the heading. The setup is described in https://docs.astro.build/en/guides/markdown-content/#heading-ids-and-plugins and produces the following HTML:

<h2 id="heading-1"><a href="#heading-1">#</a>Heading 1</h2>

The link should stay inside the <h2> because the font-size of the "#" has to be the same as the heading.

Now when extracting the headings via const { Content, headings } = await render(post);, the headings text value is "#Heading 1" but I want it to be "Heading 1". Now obviuosly I could go about and parse the headings and remove the "#" by myself, but I was curious if there is a built in solution to also override the getHeadings() function.

Docs
Markdown in Astro

Learn about Astro's built-in support for Markdown.

paper wyvern
#

Oh, interesting. Hadn’t hit that before, but makes sense. I don’t think we have a way to override that though 🤔

#

Markup ended looking more or less like this:

<div class="heading-wrapper level-h3">
  <h3 id="my-heading">My heading/h3>
  <a class="anchor-link" href="#my-heading">
    <span aria-hidden="true">#</span>
    <span class="sr-only">Section titled “My heading”</span>
  </a>
</div>

Which allows you to set the shared font-size on the wrapper and avoids the link interfering with the accessible name of the heading.