How to make code screenshots people actually read

A code screenshot is a poster, not a file. It gets about one second of attention in a timeline, and every decision should serve that second.

Keep it under fifteen lines

The single biggest mistake is pasting a whole module. Fifteen lines is roughly the limit at which a phone screen can still show legible text. If the idea needs more, it needs a blog post, not an image.

Size the font for the smallest screen

Sixteen to twenty pixels at 1x looks oversized on your monitor and correct on a phone. Then export at 2x or 3x so the image stays crisp on high-DPI displays. Exporting at 1x and letting the platform upscale is what makes snippets look blurry.

Padding is what makes it look designed

A gradient backdrop with generous padding separates the card from the timeline background and gives the shadow room to work. Around sixty pixels on each side is a good default.

Contrast beats theme fashion

Dark themes photograph well, but only if the comment colour is still readable. Check the dimmest token in your snippet before you export.

export async function getUser(id: string) {
  const res = await fetch("/api/users/" + id);
  if (!res.ok) throw new Error("Request failed");
  return res.json();
}

Strip the noise

Remove imports, logging and defensive branches that are not part of the point. The screenshot is an argument, and everything that is not the argument is a distraction.