We should provide syntactic sugar for creating figures in Markdown

Problem

Currently, post authors have to write out full HTML to generate a figure. Take this example from one of our posts (image alt text truncated for brevity):

<figure role="figure" aria-label="daverupert.com has support for Dark Mode.">
  <img
    alt="A side-by-side comparison of light and dark themes for the home page daverupert.com..."
    src="/img/posts/2020-01-23-operating-system-and-browser-accessibility-display-modes/dark-mode.png"
  >
  <figcaption><a href="https://daverupert.com/">daverupert.com</a> has support for Dark Mode.</figcaption>
</figure>

Post authors must understand enough HTML to be able to duplicate this structure when making their own figures, and be comfortable with changes to suit their specific case. They have to know

to keep the figure's role
to replace the img tag's attributes
to repeat their figcaption's text content in the figure aria-label, but strip out any special characters

Solution

Use a markdown-it plugin so that authors can write markdown that produces a figure to our specifications.

Option 1: Implicit figures

We could overload the default markdown shorthand for an image, so that it produces a figure if (and only if) the image is on its own line in the markdown. This overload would convert the image's title attribute to the figure's figcaption element

This markown:

![Alt text](path/to/img.png "Caption")

This image is inline with some text, and that's a little weird ![Alt text](path/to/img.png "Caption").

Would render this html:

<figure role="figure" aria-label="Caption">
  <img alt="Alt text" src="path/to/img.png">
  <figcaption>Caption</figcaption>
</figure>

<p>
  This image is inline with some text, and that's a little weird 
  <img alt="Alt text" src="path/to/img.png" title="Caption">
  .
</p>

Note that the markdown that was converted into a figure did not keep the image title. The markdown that remained an img did keep its title.

➕ Known syntax; no need to learn new things ➖ Because this overloads known syntax, experienced markdown writers could be confused

Option 2: Figure blocks

We could create a wholly new syntax that renders markdown into a figure tag.

This markdown:

+++ Caption
+ ![Alt text](path/to/img.png)
+++

Would render this HTML:

<figure role="figure" aria-label="Caption">
  <img alt="Alt text" src="path/to/img.png">
  <figcaption>Caption</figcaption>
</figure>

➕ No overloading existing syntax ➖ Slightly more verbose