Carbon App

2020-07-26 link Clem

Create and share beautiful images of your source code

Sometimes, you want to share, report or highlight some snippets of code. For the most, you crop the screenshots right or the top noth add a red box around it with maybe a red arrow too.

Features

Carbon offers you the following features:

Customization. Customize things like your image’s syntax theme, font style, and more
Share quickly. Save your image or a link with one click
Save snippets. Create an account to save snippets for later. Shared snippets are automatically unfurled on Twitter and Slack.

Import

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

Drop a file onto the editor
Append a GitHub gist ID to the URL (e.g. carbon.now.sh/<gist_id_goes_here>)
Or just start typing on the website

Customization

Once you’ve got all of your code into Carbon, you can customize your image by changing the syntax theme, background color, window theme, padding, shadows, fonts, and more.

1. Create a saved snippet

Sharing a saved snippet will automatically unfurl the image on platforms like Twitter and Slack. This lets users see your creation, while also giving them access to the source code via the link.

Better yet, if you need to make an update, simply follow the link yourself to edit the snippet directly.

To create a saved snippet - link

You can embed any Carbon snippet in your website directly using the carbon.now.sh/embed URL. The “Copy Menu” lets you quickly copy the correct iFrame snippet, or the encoded URL for embedding on platforms like Medium.

This is the recommended method sharing Carbon on your own website or blog. Readers can even copy the code with the click of a button.

Finally, you can also embed saved snippets or GitHub gists using carbon.now.sh/embed/:id.

2. Download the image directly

Carbon supports downloading your image as a PNG and SVG. You can also click Export → Open to open your image directly in the browser. Finally, you can copy the Carbon image directly to your clipboard by going to Copy → Image.

3. Use the Tweet button

The Tweet button will not only share the image on Twitter, but it will also correctly encode the alt text to ensure your images are accessible. However, if you want to tweet image yourself, please check out how to make your Twitter images accessible.

Community

There are plugins available. Supporting cli, editors as vim, sublime text, Atom, VS code, Emacs, IntelliJ, etc

Go visit https://github.com/carbon-app/carbon#community for more

Conclusion

Definitely go check it out at https://carbon.now.sh !!

Here is a 5 sec example by me :