Image captions

[noClaps]

Is your feature request related to a problem? Please describe.

There is no easy way to have captions for images.

Describe the solution you'd like

Any image I'm adding as ![alt-text-here](/path/to/image/ "Text here"){.image} should have the caption be generated as "Text here" in the <figcaption> element below the image. The entire thing should be in a <figure> element and either the <img> or <figure> should have class="image".

So basically,

![Alt text here](/path/to/image/ "Text here"){.image}

should generate

<figure>
  <img class="image" src="/path/to/image/" alt="Alt text here">
  <figcaption>Text here</figcaption>
</figure>

This would allow to link to licenses and provide attribution to image sources.

Describe alternatives you've considered

I've tried using markdown-it-image-caption, markdown-it-figure-caption and mdfigcaption, but none were suitable for me.

The issue I'm having with all of these is that they're not letting me add my own classes to the <figure> element, so I can't theme each image individually. This is an issue since the images I'm using need to be of different sizes depending on where they are in the text, which classes allow me to do.

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Read the Contributing Guidelines.
• Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[brc-dd]

Sorry, but ![Alt text here](/path/to/image/ "Text here") should always generate <img src="/path/to/image/" alt="Alt text here" title="Text here" />. Its part of the CommonMark spec and we shouldn't change that. We can have some other syntax probably.

[noClaps]

In that case, I wouldn't be opposed to having

![Alt text here](/path/to/image/ "Text here"){.class}
Caption
{.figclass}

generate

<figure class="figclass">
  <img src="/path/to/image/ alt="Alt text here" title="Text here">
  <figcaption>Caption</figcaption>
</figure>

where any text directly below the image would become a <figcaption> and the entire element a <figure>.

This could be applied for other resources as well, I imagine. Code blocks could be like:

    ```
    // code here
    ```
Caption here

[brc-dd]

You can use markdown-it-implicit-figures or its forks (like markdown-it-image-figures if you want title to be caption). Then in config you'll need to do this:

import { defineConfig } from 'vitepress'
import implicitFigures from 'markdown-it-implicit-figures'

export default defineConfig({
  markdown: {
    config: (md) => {
      md.use(implicitFigures, {
        figcaption: true,
        copyAttrs: '^class$'
      })
    }
  }
})

In markdown:

![alt](https://picsum.photos/536/354 'title'){.foo}

Then you can style your figure elements using figure.foo selector.

[brc-dd]

I am closing this as this can be easily solved with a markdown-it plugin.

Refer this for complete example: https://stackblitz.com/edit/vite-qyrr8h?file=docs%2Findex.md,docs%2F.vitepress%2Fconfig.js