Member-only story

Create Code Snippets with Carbon

Nevin Katz
JavaScript in Plain English
9 min readJul 10, 2021
An Example Code Snippet Created in Carbon.
A code image created with Carbon. Background photo by liu qiaojun on Unsplash

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:

A sample image created in carbon.

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.

Interface Overview

Published in JavaScript in Plain English

New JavaScript and Web Development content every day. Follow to join our 3.5M+ monthly readers.

Written by Nevin Katz

Developer at EDC. I write about web development and biology. Subscribe at https://buttondown.email/nevkatz for article roundups.

No responses yet

What are your thoughts?