What does this do?

Carbon lets you create and share beautiful images of your source code

You know all of those code screenshots you see on Twitter? Although the code's usually impressive, we thought there was room for improvement in the aesthetic department. So what are you waiting for? Go try it out and impress all your developer and designer friends. 🎨

Who uses it?

Carbon is used by thousands of developers daily, including experts at:Companies that trust Carbon: Google, Airbnb, GitHub, Coinbase, and Microsoft

How do I use it?

Import

There are a few different ways to import code into Carbon:

  • Drop a file into the editor
  • Append a GitHub gist id to the url (example)
  • Paste your code directly

Customization

Once you've got all of your code into Carbon, you can customize your image by changing the syntax theme, background color/image, window theme, or padding.

You can even drop an image file onto the editor to set the background to that image. Give it a try!

Export/Sharing

After you've customized your image you can Tweet a link to the image, or save it directly.

If you use the 'Tweet' button, Carbon will automatically make your image accessible. However, if you want to manually tweet your Carbon image, please check out (how to make your Twitter images accessible).

If you include a Carbon image in a post, the source code will be invisible to assistive technology — it will not be possible to enlarge or copy it, etc. Please, think about adding another element with the source code as text, like (an HTML Details Element) below the image.

Keyboard Shortcuts

Open settings menu⌘ /
Export as PNG⇧ ⌘ E
Export as SVG⇧ ⌘ S
Save snippet⌥ S
Copy image to clipboard⇧ ⌘ C
Reset settings⇧ ⌘ \

I want to make this better.

Contributors welcome!