How to get something like remark-attr or rehype-attr to add props to md components like lists?

[schlichtanders]

background: I am combining mdx with astro and reveal.js and would now like to have a way to add props to the markdown components. One usecase is adding the class fragment to an arbitrary part, or adding extra props to the <code> part of the code-fences.

Importantly, these are attributes which are individual to a single list/code-block, etc., so nothing which I would like to define for all lists, all code-blocks, etc., but really something which should be defined locally.

I found remark-attr and rehype-attr but it seems both aren't supported with mdx, because mdx blocks both the curly syntax from remark-attr as well as the html-comment syntax from rehype-attr.

Is there another way to add props (attributes) to markdown components in mdx?

[wooorm]

Use markdown for the common things:

`code`

Use JSX for the exceptions:

<code className="special">code</code>

[schlichtanders]

@wooorm is the a documentation about the meta attribute and where it is supported?

I mean it seems to be supported for code tags, is it also supported for lists? how?

[wooorm]

sure, makes sense that rehype-attr does not understand MDX? If you want that, best to ask them!

for meta, I am not sure what you mean. It’s markdown. There’s the CommonMark spec if that’s what you mean? Maybe https://mdxjs.com/guides/syntax-highlighting/#syntax-highlighting-with-the-meta-field is of help?

[schlichtanders]

thank you for the pointer, so it seems that such meta data is only supported at code elements

[schlichtanders]

the custom rehype plugin example in the doc https://mdxjs.com/guides/syntax-highlighting/#syntax-highlighting-with-the-meta-field
which puts the meta attribute to props does not work for me unfortunately

[schlichtanders]

thank you very much for your help!
going offline now