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
Emma Wedekind ✨
Need to find the longest word in a string? You can use the string.split() method with the array spread operator + Math.max() to find the solution in O(n) time!
13:48 PM – 19 Feb 2019
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.
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!