Using rehype/remark plugins on elements with custom components

[emmalexandria]

I'm using custom components to style all my markdown elements (such as headers), and when I tried to integrate remark-slug and remark-autolink-headings, I ran into a problem. The plugins do not seem to apply when using custom components which (in retrospect) is obvious.

However, is there any way to work around this? In fact, am I even approaching styling things like headers correctly? I kind of just went for doing it through custom components, but I don't know if there's a better, more intended way. I know that Josh Collinsworth's blog starter manages it, but I can't for the life of me figure out where the custom layouts/styles are (if they even exist in the starter - for all I know the example site is not a 1:1 build of the repo).

Help would be greatly appreciated!

[H0R5E]

I had the same issue and I've worked around it by generating the IDs in the components using the github-slugger package. For instance:

<script lang="ts">
  import GithubSlugger from "github-slugger";

  let data: HTMLHeadElement;
  const slugger = new GithubSlugger();
</script>

<h2
  id={slugger.slug(data?.innerText)}
  bind:this={data}
  class="mt-4 text-3xl font-semibold">
  <slot />
</h2>