DEV Community

Cover image for Sharing code examples with Carbon
dAVE Inden
dAVE Inden

Posted on • Edited on

Sharing code examples with Carbon

I often find myself thinking about the best way to share something like a code example. Gists seem to work well, especially for something more complex than a function that makes up more than a few lines. But, when you do have something that is only a few lines of code that can seem like overkill.
My next thought goes to taking screenshots of my text editor. This has drawbacks as well since it can take multiple attempts to get something right that will embed well wherever I am putting the example.

Today I came across this tweet from @emmawedekind.

I was reminded that I have seen code examples that look like this before on Twitter. I really like how it looks. The code is clear, has highlighting, and the whole result just looks really polished and professional. This is the kind of resource that communicates clearly and helps to elevate the content by looking nice.
I asked Emma how they created the screenshot and they pointed out the website Carbon to me. It is a really neat site built by Dawn Labs that is free to use. You can choose from various themes to adjust the colors. There is a setting for the language you are using so that it gets the highlighting right. You can export the image out to PNG or SVG for use online or just tweet the picture directly from there if you want.
The results look really nice.
Example Javascript code
I really like how it takes the guess work out of creating code example images and leaves you able to focus on the code that you are trying to share. I definitely suggest checking it out and seeing if it can help you.

Have you used Carbon before? I'd love to see examples of how folks have used this in their own work. Let me know in the comments!

UPDATE (Mar 2nd, 2019)
Multiple folks in the comments have pointed out the accessibility issues with using only images to share code as it hinders someone using a screen reader to be able to consume the content fully. Screen readers won't read out the content of the image and instead use the Alt Text set for the image.
It's also been noted that when the code is in an image it can't be selected for copying and pasting for review in a text editor.
These are both very valid points. I still think Carbon is an awesome app and is very useful, but this goes to show that it isn't a complete solution and should be combined with other methods of sharing code to ensure everyone can get what they need.
I'd still say to use it for sharing code snippets on Twitter as there really isn't a better way to do it at this time within a tweet. You'd have to link out to a gist or another place otherwise.
As for using code images in content like articles I'd consider using the images as only headers or presentational pieces and then embedding a gist or something else that allows for a screen reader to function and for the code to be more easily shared as some have suggested. Or using the image to show the code and linking to a more consumable version within your text explaining the code.
If you are going to use the image for the main way to communicate the code make sure to set good Alt Text for it to help anyone using a screen reader.
A lot of this can be hard to get right sometimes. I found some good resources on Twitter from Marcy Sutton who replied back on this tweet.

Latest comments (27)

Collapse
 
lonlilokli profile image
Lonli-Lokli

As I see they support embedding in Medium, so you can just paste the link in post and will render with image. Have you tried it with Dev.to?

Collapse
 
moopet profile image
Ben Sinclair

I made a post about why this is a bad idea a while ago (but after you wrote this one): dev.to/moopet/embedding-code-in-po...

Other people have talked about accessibility, so I'm going to add something else to the mix: potentially confusing UI.

There's a constant desire burning in the back of the eyes of everyone who calls themselves a "designer", and it's the desire to make things look like they're made by Apple. In Carbon, it extends to adding fake window controls to the image. There's literally no reason for this apart from someone's sense of aesthetic trumping their consideration for the end-user.

At best, you'll get something that clashes with the UI on your user's display, since they're using Windows or Apple have changed their colourscheme again.
At worst, people will spend time clicking them to see if they afford functionality like copying or viewing as raw text.

Collapse
 
rohansawant profile image
Rohan Sawant

Ha! I had no idea I wanted to know this, but apparently I did.

Nice! ✋🏽

Collapse
 
daveskull81 profile image
dAVE Inden

Awesome! I’m glad you enjoyed it.

Collapse
 
qzsg profile image
Adrian

I'm amused and happy it has syntax highlighting for VHDL

Collapse
 
alchermd profile image
John Alcher

A carbon generated image + a link to a gist would be the perfect combination.

Collapse
 
pickleat profile image
Andy Pickle

I’ve been wondering this myself!

Collapse
 
solkimicreb profile image
Miklos Bertalan

Thanks for this article. I love carbon and I think it deserves more recognition.

A tip for new users: click on that sneaky settings button in the top right corner. I usually find a few things (like the default shadow) a bit annoying but pretty much everything can be customized.

Collapse
 
daveskull81 profile image
dAVE Inden

Thanks! I'm glad you liked the article. I obviously agree that Carbon is really neat. :) Great tip on the settings button. There is a lot in there to customize.

Collapse
 
skyller360 profile image
Anthony Tomson

If you use Visual Studio Code, you can use Polacode : marketplace.visualstudio.com/items... 😉

Collapse
 
nombrekeff profile image
Keff

Cool, this is really nice! I will use it!

Collapse
 
daveskull81 profile image
dAVE Inden

That's super awesome. Thanks for sharing that. I do use VS Code. I love how many cool things can be found for working in VS Code. It seems to have everything.

Collapse
 
avalander profile image
Avalander

That's really neat, thanks for the pointer!

Collapse
 
jaakidup profile image
Jaaki

Nice, been wondering about this too.

Collapse
 
emmabostian profile image
Emma Bostian ✨

Hey! That's me! :D

Collapse
 
daveskull81 profile image
dAVE Inden

Yup. Thanks again for the tip! :)