Eleventy: Render <img> within <figure> rather than <p> in Markdown?

[danchristian]

My CMS outputs a raw markdown string. Images are inline and Markdown parses will force them to be wrapped in block elements. How can I get Eleventy to render images within <figure> rather than <p> tags?

Current
<p><img></p>

Desired
<figure><img></figure>

[kleinfreund]

You can write HTML in Markdown:

# H1

<figure>
  <img ...>
  <figcaption>...</figcaption>
</figure>

[jevets]

I'm in agreement with @kleinfreund.

But for posterity, you could add a markdown plugin, maybe this
https://www.npmjs.com/package/markdown-it-implicit-figures

And see the Eleventy docs on adding markdown plugins
https://www.11ty.io/docs/languages/markdown/#add-your-own-plugins

[zachleat]

(Thank you everyone for your replies here!)

This is an automated message to let you know that a helpful response was posted to your issue and for the health of the repository issue tracker the issue will be closed. This is to help alleviate issues hanging open waiting for a response from the original poster.

If the response works to solve your problem—great! But if you’re still having problems, do not let the issue’s closing deter you if you have additional questions! Post another comment and I will reopen the issue. Thanks!

[disklosr]

@kleinfreund that defeats the purpose of markdown. I solved this same problem using a markdown-it plugin (implicit-figures)