One of the tools I've really enjoyed using for the past month is Ray.so.
It allows you to create great looking images of your code by simply copying and pasting it in, and letting the software detect the correct language.
I came across it when trying to find a good CSS/JS library to style code snippets for this blog.
Unfortunately, I'd still like users to be able to copy code snippets (and it's ideal for SEO to have the code in text also), so it's not suitable for that.
Where would I use it?
So where do I use it? Social media of course!
There are great communities on Twitter, like DEVCommunity and 100DaysOfCode where often someone will ask how to solve a specific coding problem.
For instance, if someone asks how to write a typical FizzBuzz output in Javascript, it takes only a couple of minutes to create this image:
Comparing that to my blog, makes me realise there's still a few styles I need to tweak:
for (var i = 1 ; i < 101 ; i++) {
if (i % 15 == 0) console.log("FizzBuzz")
else if (i % 3 == 0) console.log("Fizz")
else if (i % 5 == 0) console.log("Buzz")
else console.log(i);
}VS Code extension
As a bonus, I've found and downloaded this extension: RayThis: Instant Beautiful Code Screenshots.
This allows me to create code images using Ray.so, without having to leave VS code. Perfect for when I'm working on the laptop, and I don't want to have to juggle lots of windows!
If you ever need to create code screenshots, I definitely recommend checking both Ray.so and the above extension out.
