Skip to content
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.

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

How to enable remark-slug plugin? #397

Closed
sunknudsen opened this issue Mar 6, 2020 · 6 comments
Closed

How to enable remark-slug plugin? #397

sunknudsen opened this issue Mar 6, 2020 · 6 comments

Comments

@sunknudsen
Copy link

sunknudsen commented Mar 6, 2020

The following code doesn’t throw an error but id’s are not added to headings.

Also tried plugins={[[require("remark-slug")]]}.

<ReactMarkdown
  source={source}
  plugins={[require("remark-slug")]}
/>
@shyaniv7
Copy link

I think it would be

import slug from 'remark-slug';

<ReactMarkdown
  source={source}
  plugins={[slug]}
/>

which is essentially the same as your example. I have the same working using the remark-toc plugin

@sunknudsen
Copy link
Author

Hey @shyaniv7, thanks for helping out. Unfortunately, I believe what you are suggesting is identical to using plugins={[require("remark-slug")]} and it doesn’t work. No errors are thrown, but ids are not added to the heading tags.

@shyaniv7
Copy link

Hey @shyaniv7, thanks for helping out. Unfortunately, I believe what you are suggesting is identical to using plugins={[require("remark-slug")]} and it doesn’t work. No errors are thrown, but ids are not added to the heading tags.

Hey @sunknudsen, if what youre trying to do is add id="" to your tags check out my answer here #404 you can override the heading node renderer

@sunknudsen
Copy link
Author

Thanks for sharing @shyaniv7.

I ended up overriding the heading as you suggested but using github-slugger.

interface HeadingProps {
  level: number
  children: JSX.Element[]
}

const Heading: FunctionComponent<HeadingProps> = function(props) {
  return React.createElement(
    `h${props.level}`,
    {
      id: slug(props.children[0].props.children),
    },
    props.children
  )
}

@Madsim
Copy link

Madsim commented May 7, 2020

I have the same problem. Tracked it down to the renderers as well. It seems the data field on nodes is just ignored and not added to the prop set. Is there a specific reason for that @rexxars? I could provide a feature to allow, at least a few importand and react safe attributes from node.data.

@ChristianMurphy
Copy link
Member

This appears to be a duplicate of #384, since remark-slug uses hProperties to set the id.
The resolution will be #428, closing this in favor of #384 since it is more specific.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

4 participants