How to Make a Code Screenshot That People Actually Read

A code screenshot does one job: get someone to read your code without opening a link. A raw OS screenshot of your editor can do that, but it usually brings your file tree, a red squiggle and a 13 px font along with it. Here are three ways to make a better one, from fastest to most manual, plus the things that make any code image easier to read.

Option 1: Generate it with the AI snippet tool

The Snipsco AI snippet tool turns code into a finished 16:9 image.

1. Sign in and paste your code, upload a text file (about 100 KB), or pick one of your saved gists. Prettier formats supported languages on paste.
2. Choose a design.
3. Optionally add short instructions, like "dark, minimal, highlight the return line", and mark the lines you want called out.
4. Generate. The image is saved in your project history, so you can download or share it later.

The 16:9 format fits X, LinkedIn, slides and YouTube thumbnails without cropping.

Pricing: Free gives you 5 AI images a day with a small snipsco.com watermark. Pro is $6/month or $48/year for 100 images a day, no watermark and a priority queue.

Use this when you share code often and want something that looks designed without spending time designing it.

Option 2: Build it by hand on the canvas

The code snippet canvas is the manual route. You paste code, pick a theme and background, and arrange things yourself. Shapes, arrows and text labels let you point at a specific line or explain what a block does.

Use this when you want full control over layout, or you're making a diagram-like image, like an arrow from a function to where it's called.

Option 3: A plain screenshot, done properly

Sometimes a real editor screenshot is right, for example when you're showing an error inline or an IDE feature. Make it cleaner:

• Hide the sidebar, minimap and tabs. Zen or focus mode does most of this.
• Bump the font size to 18–20 px before taking the screenshot.
• Fix lint warnings first, or turn them off. Squiggles distract.
• Crop tight around the code.

What makes a code screenshot readable

These apply whatever tool you use.

Keep it short. 5–20 lines is the sweet spot. Past roughly 25 lines the text gets too small on a phone, and most people read X and LinkedIn on a phone. If the point is in three lines, show those three and replace the rest with a // ... comment.

Show one idea. A screenshot should answer one question, like "how do I debounce this?" or "what changed in this API?". If you need two, make two images.

Format first. Consistent indentation and line breaks do more for readability than any theme. Run Prettier, or your language's formatter, before you capture.

Pick contrast over style. Very low-contrast themes look nice in a mockup and turn into mush once a platform compresses the image. Dark themes with clear token colors hold up best.

Point at the important line. A highlight, an arrow or a one-line caption tells readers where to look. Without it they scan the whole block, and many give up.

Add the language or filename. A small api.ts label saves readers from guessing.

Always paste the code as text too. Images aren't searchable, can't be copied and are hard for screen readers. Put the code in the post body, a gist or alt text alongside the image.

Where code screenshots work well

• X and LinkedIn posts. An image stops the scroll in a way a code block can't, because neither platform renders code blocks.
• Slides and talks. Images keep their highlighting exactly, unlike pasted text.
• Docs and READMEs. Use them to show a before and after, while keeping the copyable code in a block underneath.
• Thumbnails for tutorials and videos.

They're a bad fit anywhere people need to run the code, like install steps or config files. Use a text block there.

Other formats

Have an SVG or HTML snippet you want as a picture instead? The SVG code to image and HTML code to image converters run in your browser with no account.

FAQ

What's the best size for a code screenshot on X? 16:9 works well in the timeline, which is the format the AI snippet tool produces. Keep the code to about 20 lines so it stays readable on a phone.

Is there a free code screenshot tool? Yes. The Snipsco AI snippet tool gives you 5 free images a day with a small watermark, and the canvas is free to use.

Do I need an account? The AI snippet tool needs a sign-in so it can save your project and history. The SVG and HTML converters don't.

Should I share code as an image or as text? Both. Use the image to get attention and the text so people can copy it, search it and read it with a screen reader.