comark-zoom

Zoom images and any block like medium-zoom, written in Markdown. A Comark plugin for HTML, Vue, React, and Svelte.

pnpm add comark comark-zoom

import { createHtmlRenderer } from "@comark/html";
import zoom, { components } from "comark-zoom/html";

const render = createHtmlRenderer({ plugins: [zoom()], components });

Content images zoom on their own, except images inside links. Wrap any other block in ::zoom to make it zoomable, and give blocks the same group to page through them in one zoomed view with a strip at the bottom:

![Dashboard](dashboard.png)

::zoom{group="tour" title="Step one"}
Any Markdown: code, callouts, tables.
::

The zoomed view grows out of the item's place on the page. Escape, Back, and a click around it close it; arrow keys and the strip page through a group; Enter or Space opens a focused item. zoom({ images: false }) leaves images alone, except those you mark with {data-zoom}, and {zoom=false} keeps one image from zooming. Add data-zoom-src to an image to load a larger file when it zooms; the page's image shows until it loads.

Images in data URIs get their width and height while parsing, so the page keeps their room before they load. zoom({ size: true }) also measures remote images with range requests. Enable it only for trusted documents, since requests follow redirects and can reach private networks. zoom({ size: false }) turns measurement off. An image with one pixel side gets the other at the file's ratio; both sides, or a side like 50%, are kept. measure() from comark-zoom/size needs { remote: true } to fetch URLs.

Renderers

| Renderer | Import | | --- | --- | | @comark/html | comark-zoom/html: the script is inlined | | @comark/vue | comark-zoom/vue | | @comark/react | comark-zoom/react | | @comark/svelte | comark-zoom/svelte |

Each entry exports the parse plugin as default and the renderer's components. Without a renderer, call start() from comark-zoom/client once on a page with data-zoom elements; it returns a function that stops it.

Customize

The zoomed view fires comark-zoom:open, comark-zoom:change, and comark-zoom:close on the item. open and change carry the dialog's header, footer, and a layer sized to the zoomed content, so a host can add its own controls or draw pins over it, plus copyOf(element) and originalOf(element) to go between the page and the zoomed copy.

An item that needs styles from its ancestors names them with data-zoom-context, a selector: the copy goes inside empty copies of every ancestor that matches. data-zoom-aside, another selector, puts a copy of that element beside the zoomed item at its own size, such as a caption.

The styles follow shadcn/ui: they read its CSS variables, such as --background and --border, when the page has them, and use its neutral theme otherwise. Set --comark-background, --comark-foreground, --comark-muted, --comark-border, --comark-accent, --comark-ring, --comark-radius, or --comark-font to theme zoom, carousel, and annotate at once; the rules sit in a comark CSS layer, so any plain rule of your own wins. See Theming for the Nuxt UI mapping. To theme only the zoomed view, set the tokens on .cz-dialog, and change the backdrop with --cz-backdrop or --cz-backdrop-opacity; see the zoom's Theming page.