How to make remark-directive work with img?

[edward1127]

I want to enable passing props as arguments to an img element.
For example: ![image info](./pictures/image.png){className="w-5 h-5"}.
Could someone give me some guidance on how to do this?

[ChristianMurphy]

@edward1127 welcome!
You are asking two separate questions here.
https://github.com/micromark/micromark-extension-directive#syntax has examples of directive syntax, you are welcome to make an image directive.
The example you shared is not a directive so it will not work in remark directive.

---

What you show in your example is attributes syntax, which has no standard.
There are some plugins you could look into:

• https://github.com/manuelmeister/remark-attributes
• https://github.com/medfreeman/remark-generic-extensions
• https://github.com/arobase-che/remark-attr

These attributes plugins are not standardized though, so, you milage may vary.

[edward1127]

Thank you for providing guidance!