MARK IT DOWN
Mark It Down
页面 · Mark It Down

PNG export — code blocks & tables

Mark It Down can snapshot rich content into a PNG using a Carbon-style chrome window over a gradient backdrop. Two surfaces use this today:

  • Code blocks — right-click a code block in the preview → Export as PNG.
  • Data tables — toolbar export menu (or right-click a table) → Export as PNG.

What you get

text
  • The gradient comes from the user's Code export gradient setting (Settings → Appearance). Toggle it off to capture without a backdrop — the chrome alone is exported on the app's surface color.
  • The chrome window keeps macOS-style traffic-light dots and a centered title pill.
  • Filenames are stamped with a unique 8-char id per #238: code--<id>.png, table--<id>.png.

Code-block padding (#260)

The export's inner padding is intentionally looser than the live preview:

SurfacePadding inside chromeBackdrop padding
Live preview16px (compact, terminal feel)n/a
PNG export28px / 24px96px

The live preview keeps its tighter padding so reading isn't airy. The export deliberately breathes so the screenshot looks like Carbon — generous gradient on all four sides plus a comfortable margin between the chrome border and the first character.

Table PNG (#261)

The DataTable export menu has a new Export as PNG item between Copy as Markdown and Download CSV. Behavior:

  • Snapshots the filtered + sorted view the user is looking at.
  • Hides the toolbar and pagination footer in the snapshot — the goal is a shareable image of the data, not the controls.
  • Removes the scroll cap (overflow: visible) so the entire visible page is captured even if it would normally be inside a scrollable area.
  • Wraps the same chrome window used by code-block exports for visual consistency.

If the table is huge (hundreds of rows), the snapshot can become tall. Filter or paginate first — Export as PNG captures whatever's currently rendered.

Implementation

Both flows live in apps/electron/renderer/renderer.ts:

  • exportCodeBlockAsPNG(target) — preserves the original code-window chrome.
  • exportTableAsPNG(card) — wraps the DataTable card in a generic .mid-export-window chrome before capture.

CSS:

  • .mid-code-export-bg — backdrop wrapper (gradient + 96px padding).
  • .mid-export-window — generic chrome shared by tables (and reusable for any future "export X as PNG" surface).
  • .mid-export-window .mid-data-table — overrides scroll/border/shadow so the snapshot reads as one clean panel.

Both helpers position the temporary capture node off-screen via transform: translate(-200vw, 0) rather than opacity: 0 — html-to-image clones inline styles onto its captured root, so an opacity-hidden wrapper used to produce a fully-transparent PNG (#237).