Twitter and other social media platforms are great ways of sharing small snippets of useful source code. It’s nice to spruce these samples up a bit with some pretty colors or fancy decoration.
The Carbon web app allows you to create images of source code samples. It provides several features including syntax highlighting, various fonts, and themes. It then allows you to copy your code image to Medium, tweet it, or save it as an image file.
The Basics of Using Carbon
The Carbon home page displays some example code in its main text box. This is already a useful demonstration of the service. It shows you an accurate preview of the kind of image you can create.
Start by entering some code. You can copy & paste from a text editor, or type it in directly. Notice that the text box expands to the width of your longest line.
How to Customize Your Source Code Image
Carbon creates an image of your source code with syntax-highlighted, colored text. It presents your code in a basic window on top of a background color or image.
The theme setting allows you to apply a text color palette from a predefined range. Many of these themes are in common use amongst text editors and other existing software.
The language setting will be Auto by default, so Carbon will attempt to guess the language. But it’s best to select the specific language via the drop-down. Some languages are difficult to detect from source code alone.
At a lower-level, Carbon provides various style settings to tweak the final code image. These are all available under the settings menu with the gear icon:
You can select from a range of 15 different monospace fonts. You can include window controls in your image and vary its width or the padding around its code window. You can also change line-height, font size, and include line numbers. If you use the service often, you can save your settings as a preset for future use.
Carbon’s Integration With GitHub Gists
A very useful feature allows you to load source code from a GitHub Gist. Do this by appending the Gist ID to Carbon’s domain to get a URL in this format:
https://carbon.now.sh/ea85abfb66e419ffd45564abd5bba3e7Carbon will then import the source code from that Gist and you’re then free to work with it as if you’d typed it in directly.
How to Export a Code Image From Carbon
Once you’ve configured your code sample to your liking, it’s time to make use of it. You have two main options here: tweet it or save it as a file.
Carbon’s main aim is to improve code images posted to Twitter, so it presents tweeting as its first export option. Pressing the Tweet button opens a tweet creation dialog in a popup window. The tweet is pre-populated with a URL which converts into an uploaded image when you send the tweet. Beyond that, you can edit the tweet as you see fit.
Downloading the image as a file provides a bit more flexibility. You can export it as a PNG or SVG and scale the size while you do so.
Carbon also allows you to copy and paste the image you’ve created. It includes an option that allows you to embed the code in a Medium post or upload the image to Imgur.
The Benefits of Sharing Source Code in an Image
Sharing source code as an image has several advantages. For Twitter, in particular, it helps to get around the maximum tweet length. In theory, you can create images containing much more code than Twitter’s text limit will allow.
Carbon’s main feature is syntax highlighting. You can’t currently syntax highlight plain text on Twitter or many other services.
Source code images are also slightly easier to share and store than source code text. But they can discourage source code copying, which might be a good thing. You might worry that people can copy your code without understanding what it actually does.
The Drawbacks of Embedding Source Code in an Image
Images take up a lot more storage space than text. Although it's possible to extract text from images, it still requires extra effort.
Most importantly, text in images is often inaccessible to those who cannot see it. Screen readers, for example, may not be able to access such text. Carbon’s Tweet button automatically supplies alt text which mitigates this issue.
Using Carbon to Share Your Code Snippets
Carbon allows you to easily create attractive images of source code snippets. It’s a simple web app that focuses on one specific task with just enough customization.
Carbon converts your source code text into images and this may not always be appropriate. If you want to share your code as actual text, there are many options to do so.
