Skip to content

Figures with Captions

Information

We use the caption plugin to automatically number and cross-reference figures and tables in Material for MkDocs.

The Markdown way to add an image is a Markdown link preceded by an exclamation mark:

![alt text here](image url)

By using the attribute list syntax we can add CSS classes, id, attributes etc, without resorting to HTML.

![caption text here](image url){ width=300px #MyImgId }

Here is an example:

![An elephant at sunset](https://interactive-examples.mdn.mozilla.net/media/cc0-images/elephant-660-480.jpg){ width=300px #MyElephant}

An elephant at sunset
Figure 1: An elephant at sunset

Like with tables, we reference the image by its id by an "empty" link:

The beautiful specimen in [](#MyElephant) is a bull with the name of Kevin.

The beautiful specimen in Figure 1 is a bull with the name of Kevin.