Code Shot guide
How to make a beautiful code screenshot for slides and social posts
To make a good code screenshot, paste a short snippet (ideally under 20 lines) into a code image tool, set the language for syntax highlighting, choose a high-contrast theme and a large enough font, highlight the one or two lines that matter, then export a PNG at 2x for crisp text. Always post the code as text or a link too, with alt text on the image, so people can copy it and screen readers can read it.
How to make a code screenshot, step by step
- Trim the snippet. Cut it down to the part that makes your point. Remove imports, logging and anything unrelated.
- Paste it into Code Shot and check the language. Auto detect usually gets it right; set it by hand if the colours look wrong.
- Choose a theme. Dark or light, with a background gradient behind the window.
- Set the font size for where it's going (see the table below).
- Spotlight the key lines by tapping their line numbers. The rest fade back.
- Pick a frame: window lights, a file tab, or none, and the padding around it.
- Export. PNG at 2x suits most posts; 4x for slides on big screens; SVG when you need it sharp at any size.
Making it readable
| Where it's going | Lines | Font size | Export |
|---|---|---|---|
| Social post | Up to about 15 | 16 or 18 | PNG 2x, or the square card |
| Slides | Up to about 12 | 18 | PNG 4x or SVG |
| Blog post or docs | Up to about 25 | 14 or 16 | PNG 2x or SVG |
| README | Short snippets only | 14 | SVG |
- Keep lines short. Long lines force a wide image that gets shrunk on phones. Wrap them by hand.
- Use a high-contrast theme. Pale comments on a pale background disappear when the image is compressed.
- Show changes as a diff. Diff view marks added and removed lines with + and −, which is clearer than "before" and "after" images.
Accessibility: always share the text too
An image of code can't be copied, searched or read by a screen reader. A few habits fix most of that:
- Write alt text that says what the code does, such as "A 6-line JavaScript function that debounces a callback".
- Post the code as text in a reply, a gist or a link.
- Use Code Shot's link: Copy link makes a URL that rebuilds the exact shot, code included, so people can open it and copy the code.
More in Code Shot
Code Shot runs in your browser with no account. The bottom toolbar has Theme, Code, Font, Frame and Share, and Export saves a PNG straight away.
- Languages: JavaScript, TypeScript, Python, HTML, CSS, JSON, Bash, terminal sessions, Go, Rust, Swift, SQL, Java, C and C++, Ruby, PHP and plain text.
- Share options: PNG 2x or 4x, Copy image, SVG, a 1080 × 1080 square card, a tweet-ready copy, Copy link and Copy embed.
- Saved shots and Back up / Restore in the ⋯ menu.
- Tidy indentation and Try a sample in the Code sheet.
Ten themes are free. Code Shot Pro, a one-time $2.99, adds all 19 themes, multi-file tabs and a typing video that shows the code being typed out (you can try the video a few times first).
Common mistakes
- Posting 60 lines. Nobody reads it on a phone. Trim to the point.
- Tiny font. Use 16 to 18 for social posts and slides.
- Low-contrast themes. They look stylish and read badly after compression.
- No alt text. Describe what the code does.
- Image only. Share the code as text or a link as well.
- Secrets in the screenshot. Check for API keys, tokens and private URLs before you post.
Questions
How do I make a code snippet image?
Paste the code into a code image tool such as Code Shot, set the language, pick a theme and font size, highlight the key lines and export a PNG or SVG.
What is the best font size for code on slides?
Around 18 in Code Shot, with no more than about 12 lines per slide, so the back of the room can read it.
PNG or SVG for code images?
PNG works everywhere, including social sites. SVG stays sharp at any size and suits docs and slides that support it.
Can people copy the code from my image?
Not from the image itself. Share the code as text too, or use Code Shot's Copy link, which rebuilds the shot with the code included.
Is Code Shot like Carbon?
It does a similar job, making images of code, and also adds line spotlights, diff view, terminal sessions, a square social card and an optional typing video.
Is Code Shot free?
Yes. Code Shot is free with 10 themes and every image export. Code Shot Pro adds all 19 themes, multi-file tabs and the typing video for a one-time $2.99.