Member-only story
Create Code Snippets with Carbon

When I started writing code tutorials, one question I grappled with was how best to present my code snippets in an attractive, easy-to-read way. As I looked for examples, I ran across a tutorial with source code images that all looked exquisite. Each image had highlighted syntax, thick borders with a hint of drop shadow, and three buttons on the upper left that gave a touch of authenticity. The general appearance looked something like this:

I was impressed with how clean and detailed each code sample looked, and started thinking, Wow, these images must have taken a lot of work to set up. I wonder what image editing tool the author used. Photoshop? Pixelmator?
Upon browsing a comment thread, I found that the images were made with a free online tool known as Carbon. Created by Dawn Labs, Carbon is a terrific resource for creating beautiful code sample images in a multitude of programming languages. While there is a command-line version known as carbon-now-cli, this article focuses on the free online version at carbon.now.sh, with a walkthrough of the interface and seven tricks for getting the most out of the tool.