Markdown Image Lightbox

Adds a JavaScript-free click-to-zoom image lightbox to VSCode's markdown preview.

Overview

Opt an image into a lightbox with a leading !!. The marked image becomes a trigger that opens the full-size image in a modal <dialog>, dimming and blurring the page behind it. Unmarked images (![…]) render normally.

The entire interaction — open, close, backdrop dismiss, Esc, focus trapping, and the zoom/fade animation — is built from modern declarative HTML and CSS only (<dialog>, the Invoker Commands API, closedby="any", @starting-style). No JavaScript runs in the preview, so it works where scripts are disabled.

Syntax

Add a second ! in front of any image:

!![A wild rice field](https://github.com/mirrordown/mirrordown/raw/HEAD/wild-rice.jpg "Wild rice")

Click the image to zoom; click it again, click the backdrop, or press Esc to close.

Repeated images

Reference the same image more than once and every trigger opens the same dialog — there's one lightbox per image, not one per mention:

!![Diagram](https://github.com/mirrordown/mirrordown/raw/HEAD/diagram.png) … later … !![Diagram again](https://github.com/mirrordown/mirrordown/raw/HEAD/diagram.png)

With the Markdown Attributes extension installed, give a lightbox a stable id with {#id}:

!![Hero shot](https://github.com/mirrordown/mirrordown/raw/HEAD/hero.jpg){#hero}

Images inside links

An image wrapped in a link is left alone — a button can't nest in a link, so the link wins and the ! stays literal:

[!![Thumbnail](https://github.com/mirrordown/mirrordown/raw/HEAD/thumb.jpg)](https://example.com)

Styling

This extension ships default styles for the preview. Tune them with public custom properties, or override the structure entirely, by pointing VSCode's markdown.styles setting at your own CSS file:

// .vscode/settings.json
{
  "markdown.styles": ["./my-preview-styles.css"]
}

/* my-preview-styles.css */
:root {
  --markdown-lightbox-backdrop: rgb(0 0 0 / 85%);
  --markdown-lightbox-blur: 6px;
  --markdown-lightbox-radius: 0.5rem;
  --markdown-lightbox-duration: 0.2s;
}

About

Part of Markdown Preview Extended Syntax — a pack of Markdown preview syntax extensions you can install all at once.

saeris