Skip to content

🖤 Create and share beautiful images of your source code

License

Notifications You must be signed in to change notification settings

carbon-app/carbon

Image

maintained with Ranger All Contributors MIT License FOSSA Status



Translations
Español हिंदी Deutsch 简体中文 Português
മലയാളം Türkçe 한국어 தமிழ் Français
日本語 Svenska Polski Nederlands 正體中文
Indonesia Українська Italiano עברית Русский
العربية বাংলা فارسی Add +

Introduction

You know all of those code screenshots you see on Twitter? Though the code's usually impressive, we saw room for improvement in the aesthetic department. Carbon makes it easy to create and share beautiful images of your source code. So what are you waiting for? Go impress all of your followers with your newfound design prowess.

Carbon example

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.

Usage

Import

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

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.

Exporting & Sharing

After you've customized your image you can share your snippet in a number of ways

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:

  1. Login using the "Sign in/Sign up" button
  2. Edit as you normally would — your snippet will get saved automatically
  3. Copy the URL from your browser window and share away!
Embed a snippet

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

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.

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

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.

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.

Installing Carbon for Desktop (Offline)

If you are using Google Chrome, or another browser that supports Progressive Web Apps, you can install Carbon for use offline by:

  1. Visit carbon.now.sh
  2. Click your browser's settings menu
  3. Click "Install Carbon..."

Community

Check out these projects our awesome community has created:

Editor Plugins
Tools
  • CLI carbon-now-cli - Open a file in Carbon or download it directly using carbon-now, featuring an interactive mode, selective highlighting and more
  • CodeExpander - A smart GitHub gist client with the TextExpander features
  • nef - Export multiple Carbon code snippets from Xcode Playground.
  • @carbonshbot - A Telegram chatbot which takes in a code snippet or gist URL and generates an Carbon image
  • R carbonate - Iteratively manipulate image aesthetics in R and either open in Carbon or download directly.
  • Carbon for Slack - Use Carbon directly in Slack. Just invoke the /carbon command.
Citations

Authors

Carbon is a project by:

License

FOSSA Status




Contribute & Support

Pull requests are welcome! Please see our contributing guidelines for more details.

Sponsors & Backers

Fossa

Powered by Vercel

Image Image Image Image Image Image Image Image

Thanks To

▲ Vercel for sponsoring Carbon's hosting.

All Contributors

Thanks goes out to all these wonderful people (emoji key):

Image
briandennis

💻 📖 🚇 👀
Image
mfix22

💬 💻 🤔
Image
jakedex

💬 💻 🎨 📹
Image
andrewda

💬 💻 🐛 👀
Image
yeskunall

💻 📖 🔧 🐛
Image
stoshfabricius

💻
Image
jkling38

📖
Image
otobrglez

💻
Image
darahak

📖
Image
dom96

💻
Image
elrumordelaluz

💻
Image
cjb

💻
Image
Krzysztof-Cieslak

💻
Image
fernahh

📖
Image
g3r4n

💻
Image
Mat Gadd

🐛 💻
Image
Brad Davies

🐛 💻
Image
Rafael Câmara

💻
Image
Gleb Bahmutov

⚠️ 🔧
Image
Iván Munguía

💻
Image
Dillon Mulroy

💻
Image
Nihad Abbasov

💻
Image
Bruno C. Couto

💻
Image
Mark Molnar

💻
Image
Takahiko Inayama

💻
Image
François Martin

💻
Image
Raphael Amorim

💻
Image
Camron Flanders

💻
Image
Eric Adamski

💻
Image
Winner Crespo

💻 🎨
Image
Milos

💻 🔧 📖 🌍
Image
Yashu Mittal

💻
Image
Rachel M. Carmena

📖
Image
Miguel Salazar

📖 🌍
Image
Vyom Jain

📖 🌍
Image
racaljk

🌍
Image
Sean

💻
Image
Izabela Borges

🌍
Image
Shinil M S

🌍
Image
Berke Atac

🌍
Image
LEE YONGJUN

🌍
Image
Matthew Nielsen

💻
Image
Boy

📦
Image
Vetrivel Chinnasamy

🌍
Image
Farzad YZ

💻 🤔
Image
Yannick Loriot

🌍
Image
Joel Hanson

💻
Image
Muhammad Muzzammil

💻
Image
souppower

🚇
Image
Masato Urai (@uraway_)

🌍
Image
Fernando

🌍
Image
Megha Sachdev

💻 ⚠️
Image
Anudeep Reddy

🚇
Image
Munieru

🌍
Image
Adam Lusted

💻
Image
Jose Noriega

🌍
Image
Merlin Fuchs

🌍
Image
Ramy Majouji

💻
Image
Viktor Nemes

💻
Image
Eric Bailey

💻
Image
Nazeefa

🌍
Image
Pratik Butani

📝
Image
Bakti Aditya

💻
Image
Caleb Taylor

💻
Image
Rogério Munhoz

💻
Image
Technoknol

💻
Image
Tymoteusz Makowski

💻
Image
Nisar Hassan Naqvi

🐛
Image
Ilyas Karim

🐛
Image
Nick Fix

🤔
Image
Melanie Sumner

🤔
Image
aluc

💻
Image
B. Mearns

🤔
Image
Peng Jie

💻
Image
Binyamin Aron Green

💻
Image
Michal

🌍
Image
Quinn Blenkinsop

💻
Image
Dwiferdio Seagal Putra

💻
Image
Ashley Woodall Clark

💻
Image
Tim Wienk

🌍
Image
George McCarron

📖
Image
Erwin Rahayu

🌍 📖
Image
Luca

💻
Image
Andrew Hayes

💻
Image
Bereket Semagn

💻
Image
Lorenzo Lancia

🌍
Image
Guy Adler

🌍
Image
Dan Bamikiya

🤔
Image
kewang

🌍
Image
Rizda Dwi Prasetya

🖋
Image
AbreuY

🌍
Image
>_Rizky.dev

🌍 📖
Image
Abidemi Harry

💻
Image
Marco

🌍
Image
Sam Robbins

📖
Image
alceil

💻
Image
hatsu

💻
Image
Praveen Kumar Purushothaman

🌍
Image
Amir Elsagan

🌍
Image
korzck

🌍
Image
Sakibul Alam

🌍