Compatibility with remark-react?

[remarkjs]

Compatibility with remark-react?

[MoOx]

Good to know. I just found how to improve the situation.
hast-util-sanitize/lib/github.json have a clobberPrefix set to user-content-, so I added it empty in my merge like this

    .use(slug)
    .use(reactRenderer, {
      sanitize: merge(
        sanitizeGhSchema,
        {
          // remove user-content from github.json to remark-slug work as expected
          clobberPrefix: "",
          attributes: { code: ["className"] } // here I didn't had to add your trick on id.
        }
      ),
      remarkReactComponents: {
        code: RemarkLowlight(languages),
      },
    })

And now that fucking perfect! Thanks a lot for your help and reactivity!

[wooorm]

@yusufameri I’m pretty sure Max doesn’t remember how he did that two years ago, but I’m guessing by reading the docs.

[wooorm]

Yes, that’s possible, but you need to configure how to sanitize remark react!

[MoOx]

Actually my code is going what I found in some docs:

import remark from "remark"
import slug from "remark-slug"
import autoLinkHeadings from "remark-autolink-headings"
import toc from "remark-toc"
import reactRenderer from "remark-react"
import RemarkLowlight from "remark-react-lowlight"
import merge from "deepmerge"
import sanitizeGhSchema from "hast-util-sanitize/lib/github.json"

import languages from "./common-languages.js"

export default (body: string) =>
  remark()
    .use(slug)
    .use(autoLinkHeadings)
    .use(toc)
    .use(reactRenderer, {
      sanitize: merge(sanitizeGhSchema, {
        attributes: { code: ["className"] },
      }),
      remarkReactComponents: {
        code: RemarkLowlight(languages),
      },
    })
    .processSync(body, {
      commonmark: true,
    })

Is this good enough?

[wooorm]

        attributes: { code: ["className"] },

Cool, but that example only allows classNames on code elements!

If you want to allow ids on all elements, you need to add a statement, e.g., like this:

-       attributes: { code: ["className"] },
+       attributes: { code: ["className"], "*": ["id"] },

[wooorm]

👍

[yusufameri]

Good to know. I just found how to improve the situation.
hast-util-sanitize/lib/github.json have a clobberPrefix set to user-content-, so I added it empty in my merge like this

    .use(slug)
    .use(reactRenderer, {
      sanitize: merge(
        sanitizeGhSchema,
        {
          // remove user-content from github.json to remark-slug work as expected
          clobberPrefix: "",
          attributes: { code: ["className"] } // here I didn't had to add your trick on id.
        }
      ),
      remarkReactComponents: {
        code: RemarkLowlight(languages),
      },
    })

And now that fucking perfect! Thanks a lot for your help and reactivity!

OMG! This was causing me pain these past few hours. How did you figure out that clobberPrefix existed and/or was doing such a thing? Also on a separate note, I am using typescript with react but can't seem to get any of the typing to appear. Do you know how to do this?