Skip to content
duxt

ProseImg

An image: theme-aware, and zoomable.

Every image in a Markdown page.

What it adds

Two variants. A screenshot of a dark editor on a white page — or the reverse — is the most common ugly thing in documentation, and CSS cannot fix it because the pixels are wrong, not the frame. A page may name a second file:

![The sidebar](/shots/sidebar.png){dark="/shots/sidebar-dark.png"}

Click to zoom, unless the image asks not to:

![A diagram](/diagram.svg){zoom="false"}

API

Props

PropTypeDefaultNotes
srcstringAs written
altstringAs written
darkstringA second file, served under the dark theme
zoombooleantruefalse leaves the image inert

Notes

The dark variant is named explicitly rather than guessed by convention. Deriving -dark from a filename means a missing file becomes a broken image, and the author never finds out.

Was this page helpful?