Code-block toolbar

Each rendered <pre> (excluding mermaid blocks) gets:

• A language badge in the top-left, lowercase, derived from language-<n> on the inner <code>. Hidden when no language is declared.
• A floating toolbar in the top-right that fades in on hover with four actions:

Icon	Action
list-ul	Toggle line numbers (per-block, no persistence)
copy	Copy to clipboard — flashes "Copied" on success
download	Download as snippet.<ext> based on detected language
image	Export the rendered block as a PNG (2× pixel ratio)

Language → file extension

The map in LANG_TO_EXT (renderer.ts) covers the common set: ts, js, jsx/tsx, py, rb, sh (sh/bash/zsh), json, yml, md, html, xml, css, scss, go, rs, java, kt, swift, c, cpp, cs, sql, php, diff. Unknown languages fall back to .txt. dockerfile and makefile use their canonical filename instead of an extension.

Line numbers

Off by default — clicking the Lines icon adds .with-lines to the <pre>, which switches it from a single column to a 2-column grid (gutter + code) and shows a <span class="mid-code-gutter"> filled with line numbers. State is per-block and resets on each render.

PNG export

Uses html-to-image (toPng) at pixelRatio: 2. The background colour is read from the live --mid-code-bg custom property so the exported image matches the current theme. Triggers a download of code.png.

Files

• apps/electron/renderer/renderer.ts — attachCodeBlockToolbar, LANG_TO_EXT, detectCodeLanguage, downloadCode, exportCodeBlockAsPNG, addLineNumbers, helpers makeIconButton / flashButton.
• apps/electron/renderer/renderer.css — .mid-pre, .mid-code-toolbar, .mid-code-tool-btn, .mid-code-lang, .mid-code-gutter, .mid-pre.with-lines.

Verifying

Open any markdown file with code fences. Hover a block:

• Toolbar fades in top-right.
• Click list-ul — line-numbered gutter appears.
• Click copy — clipboard fills; button flashes "Copied".
• Click download — file dialog or auto-download with snippet.<ext>.
• Click image — code.png saves with the same theme palette.