Struggling to get plugins working

[tremby]

I'm trying out react-remark and I'm struggling to get plugins working.

At the moment I'm just trying to follow the example. I've installed rehype-autolink-headings, imported it as in the example, and passed it in to the Remark component as in the example.

Headings are getting rendered exactly the same as when I don't add the plugin.

import rehypeAutoLinkHeadings from "rehype-autolink-headings";

...

  return (
    <Remark rehypePlugins={[rehypeAutoLinkHeadings]}>
      {markdown}
    </Remark>
  );

Am I doing something wrong?

[ChristianMurphy]

rehype plugins work, you can see an example at https://github.com/ChristianMurphy/react-remark/blob/d588f807c00fbcbb69668eb488ba744481b55cae/stories/remark-component.stories.tsx#L44-L67 and running at https://christianmurphy.github.io/react-remark/?path=/story/remark-component--mixed-html-sanitized

In this case the issue is that rehype autolink headings depends on rehype slug. see the documentation in the rehype autolink headings readme https://github.com/rehypejs/rehype-autolink-headings#use

[wooorm]

@ChristianMurphy Would be good to add rehype-slug to the examples, next to rehypeAutoLinkHeadings

[tremby]

Thanks. That wasn't at all obvious, especially since in your example you don't include slug, as wooorm pointed out above.