When sharing code on social media, we often tend to do so using pictures to show the code easily. A lot of times this happens because most social media sites are not equipped to format code beyond 1 or 2 lines of code. It is also worth noting that whenever possible the code is meant to be run by other people. Make it easy for them to do so. Either by putting the code in the alt text or linking to the code snippet somewhere else with sites like pastebin.com and gist.github.com.
This post goes over the different ways one can generate pictures of code for sharing, in part to remind myself of the options.
A two-pronged rating system is used to evaluate each of the methods. Clocks indicate “time to create” and confetti indicates “flair”.
Screenshot
By far the easiest way to share your code is to take a screenshot inside your code editor. You might need to add a little space around it to only get what you need.
carbon.now.sh
carbon is the first website that comes to mind when talking about creating images of code. It supports a wide array of highlighting themes and supported languages. As well as export buttons.
Another neat thing is that the snippet is encoded in the url such that you can find the above example by going to this url.
ray.so
ray.so is very similar to carbon. It has fewer choices of themes, but each theme is a gradient which gives a different feel. A dark mode toggle and padding options make it different enough from carbon to be on this list.
codeimage.dev
codeimage is similar to the solutions we have seen so far. It comes with a visual list of themes and many options to customize your image. An underrated feature is the randomizer button to quickly get inspiration.
codesnap.dev
codesnap has everything that the previous methods have, but brings a little more to the table. There are now many options and dials to change the appearance of the code and its windows. This time we can add many other elements such as arrows, text, profile pictures, and watermarks. Some of these features are locked behind a login.
codekeep.io/screenshot
codekeep is very similar in functionality to codesnap.dev. One thing that makes them stand apart is that codekeep includes several humourous templates such as Windows XP and NES.
snappify.com
snappify is one of my recent favorite websites I have found. It is still quite new and appears to appeal to slidecrafting as it allows you to create multiple slides of code. But it has much of what codesnap and codekeep can offer as well. The arrows are quite nice in this version as you can drag and stretch it to be exactly where you want it to be.
Homegrown
What all the above solutions have in common, is that they use html and css to slide the code, and then you screenshot it. And that works fine the majority of the time because the defaults and settings are plentiful enough to get you where you need. But once in a while, there are things you want to do that the platform doesn’t support, and you have to make the thing yourselves.
I use Quarto Revealjs slides with my codewindow extension to get a similar feel to all the solutions out here. Then I can modify css to my heart’s desire to get exactly what I want.