How to extend the image syntax？

[LiamLeeX]

I want to extend the image syntax like this:

![leetcode](https://pic.leetcode-cn.com/leetcode.png){:height=300}{:width=200}

I've tried directive, but it will break the syntax into:

1: {type: 'text', value: '{', position: {…}, extraInfo: {…}}
2: {type: 'textDirective', name: 'height', attributes: {…}, children: Array(0), position: {…}, …}
3: {type: 'text', value: '=300}{', position: {…}}
4: {type: 'textDirective', name: 'width', attributes: {…}, children: Array(0), position: {…}, …}
5: {type: 'text', value: '=200}', position: {…}}

Can someone help me? Any advice would be appreciated.

[wooorm]

• Did you read the whole chapter on extensions? https://github.com/micromark/micromark#extensions
• That’s now how directives work
• You say you tried things and you share things like extraInfo and ASTs, which are unrelated to micromark. Perhaps good to share what you have and to spend time framing your question? More info: https://github.com/micromark/.github/blob/main/support.md#asking-quality-questions

[LiamLeeX]

Sorry, I did not describe my problem well. I have read the 'extensions' chapter several times, I've also read the source code for plugins like remark-attrs.
However, it seems that because its internal parser is micromark now plugins like remark-attrs can't be used in remark.
I want to write a remark plugin that it can parse such image syntax in remark without being affected by the default image syntax. Is there a way to override the default syntax or some other solutions?
I really appreciate you answering my questions.

![leetcode](https://pic.leetcode-cn.com/leetcode.png){:height=300}{:width=200}
=> {alt: "leetcode", height:300, width:200, url:"https://pic.leetcode-cn.com/leetcode.png"}

[wooorm]

I have read the 'extensions' chapter several times

I especially wanted to draw your extensions to the long parts where it says: don’t, don’t, don’t (in many cases)!

Is there a way to override the default syntax or some other solutions?

Sort of. You can turn syntax off (there’s an example). It’s going to get really messy though.

---

Some alternatives:

HTML

<img alt=leetcode src=./example.png height=300 width=200>

Directives: approach #1

::image[leetcode]{src=./example.png height=300 width=200}

This assumes another plugin that handles ::image directives and turns them into HTML.

Directives: approach #2

![leetcode](./example.png):props{height=300 width=200}

This assumes another plugin that handles :props directives and adds their attributes to the preceding node.

Directive-like extension

![leetcode](./example.png){height=300 width=200}

This does what Directives: approach #2 does, but a custom extension to parse {attributes}, and then a plugin to add the parsed attributes to preceding nodes.

Replace

![leetcode](./example.png){height=300 width=200}

Turn the existing label-end off, replace it with a new construct that does almost the same, but also allows attributes in braces after the resource.