Figure support for images

[Strahinja]

Subject of the feature

Plugin to surround image tags with <figure> and add <figcaption>, similar to gatsby-remark-figure or gatsby-remark-figure-caption but framework-independent. (I'd like to be able to use this feature in @nuxt/content.)

Expected behaviour

1. Convert the following Markdown:

   ! ![Alt text](image.jpg)
   ! This is a caption.

   into:

   <figure>
     <img alt="Alt text" src="image.jpg" />
     <figcaption>This is a caption.</figcaption.
   </figure

   OR
2. Convert the following Markdown:

   ![image with description](path-to-image.jpg)

   into:

   <figure>
     <img src="path-to-image.jpg">
     <figcaption>image with description</figcaption>
   </figure>

Option 1. looks better from the viewpoint of generated HTML (alt text can be specified in addition to caption), but 2. looks like it would degrade gracefully, although having the text between [] inside <figcaption> instead of the alt attribute might be confusing.

Alternatives

I guess remark-macro could be used, but then images would need to be coded inside custom pseudo-tags like [img][/img]. Having a separate plugin for this functionality seems cleaner.

[wooorm]

99% of the contents of those two plugins you linked to, are remark plugins, so this can be created!

[wooorm]

I’m not very happy about your example 2. Alt text has important semantics for folks or computers who (for some) cannot see the image. It’s not a caption.

[tremby]

My current client's legacy docs (which I need to keep support for) use this pattern:

![alt text](image url)_Caption text_

[ChristianMurphy]

Thanks for starting the discussion @Strahinja !
We're in the process unifying ideas in with discussions unifiedjs/collective#44
If you'd like to continue this thread, or start a new one https://github.com/remarkjs/remark/discussions/categories/ideas will be the home for ideas going forward.