comark-figure

Image captions in Comark: an image alone in its paragraph with a title, ![alt](src "Caption"), becomes a native <figure> with the title as its <figcaption>. A parse plugin with no components and no styles, so it works in any renderer.

pnpm add comark comark-figure

import { parseMarkdown } from "comark";
import figure from "comark-figure";

const document = await parseMarkdown(markdown, {
  plugins: [figure()],
});

![A rubber duck on a keyboard](/duck.png "The duck that found the race condition")

<figure>
  <img src="/duck.png" alt="A rubber duck on a keyboard">
  <figcaption>The duck that found the race condition</figcaption>
</figure>

The caption comes from the title only, so the alt text stays on the image for screen readers. The image keeps its other attributes and loses its title. An image inside a sentence, or with no title, stays as it was. A linked image counts, and the link stays around the image.

Images in list items, blockquotes, and definitions become figures too. A ::component that holds only the image is left alone.

With comark-zoom, the image inside a figure still zooms, in either plugin order.

Options

| Option | | | --- | --- | | unwrap | Lift every image that stands alone in its paragraph out of the <p>, with a title or without. Comark's autoUnwrap only does that in list items and blockquotes. Default false. |