Top 3 tools for creating code screenshots

When you need to present code on a slide, in a document, or on social media, taking a simple screenshot from your IDE is a bad idea:

• For printed or projected materials, the dark theme becomes unreadable (and uses a lot of ink for paper)
• Your snippet of code is often not sufficiently isolated from the rest
• It results in a plain square image, dull, and sometimes of poor quality

The good news is that I have a perfect solution that lets you:

• Capture only the piece of code you're interested in
• Keep the syntax highlighting (regardless of the language)
• Have a light background without changing your IDE's settings
• Choose the font
• Detach your code from the rest of the page (or the slide)

But I know what really interests you is the result, so here's an example of the output:

That's pleasant to read on a slide or in a printed document, and believe me, for your audience, it makes a real difference!

Carbon.now.sh

This is a web application, very handy and very comprehensive, made specifically for developers who take care with their presentations and who like to showcase their code!

It's free and available at: https://carbon.now.sh

I beg you, use it as much as you can. It's one of the best presentation tools I've found in a long time, highly customizable and yet super simple to use!

Here are a few examples of different possible renderings with Carbon (and yes, when you share code online, nothing stops you from using dark themes)!

A classic theme

A vintage theme

Ray.so

Ray is a less customizable alternative to Carbon, but on the other hand it's much faster and more intuitive to get the hang of. I'll let you make your choice, honestly both tools are great!

It's also free and available at: https://ray.so

Instacode

This tool is really different from the two presented previously. Here, readability isn't the primary goal, but rather the idea is to be able to create graphic designs from a piece of code.

Whether it's to post on Instagram, or to use this creation to illustrate the background of a slide, Instacode lets you add a 3D rotation to the code, and apply several filters to it (blur, pixelation, etc.).

It's possible to output a square format, or a "wallpaper" format, meaning in higher resolution!

It's free and available at: http://instaco.de/