Images
To add an image, use an exclamation mark (!), followed by the alt text in brackets, and the path or URL to the image asset in parentheses. You can optionally add a title in quotation marks after the path or URL.
An image
Light and dark mode¶
You can show different images for light and dark color schemes by using the only-light or only-dark classes.
Image, different for light and dark mode
{ .only-light }
{ .only-dark }
If you don't want to have two versions of the image, you can instead use the invert class, which inverts
the colors of the image only in dark mode. It doesn't look great for some images, but it's good enough most of the time.
Image, inverted colors in dark mode
{ .invert }
Image alignment¶
If the screen is wide enough, you can align images to the left or right by wrapping the content
in a <div markdown="1"></div> tag and adding the "left" or "right" class to the image.
Image, aligned to the left (if your screen width >= 960px)
<div markdown="1">
{ .left }
Aliqua id elit sint ullamco cillum consequat.
Proident ad elit laboris consectetur duis sint proident voluptate
incididunt nulla excepteur culpa tempor.
</div>
Image, aligned to the right (if your screen width >= 960px)
<div markdown="1">
{ .right }
Aliqua id elit sint ullamco cillum consequat.
Proident ad elit laboris consectetur duis sint proident voluptate
incididunt nulla excepteur culpa tempor.
</div>
To center an image, just add the class
Image, centered
{ .center }
Image captions¶
Unfortunately, the Markdown syntax doesn't provide native support for image captions, but you can use the Markdown in HTML feature with literal figure and figcaption tags:
Image, centered
<figure markdown="span">
<figcaption>Image caption</figcaption>
</figure>
Image links¶
To add a link to an image, enclose the Markdown for the image in brackets, and then add the link in parentheses.
A linked image
[](https://example.com/)
Forcing image size¶
You can force an image to have a specific width and/or height by adding attributes. Set just one of them to resize the image while preserving its aspect ratio, or set both to distort it.
Images with width/height
{ width=100 }
{ width=300 height=50 }
Lazy-loading images¶
Modern browsers provide native support for lazy-loading images through the loading=lazy attribute, which falls back to normal eager-loading in browsers without support.
Image, centered
{ loading=lazy }
