DEV Community

Cover image for Creating Beautiful Pictures of Your Code! 🎨
w6
w6

Posted on • Edited on

Creating Beautiful Pictures of Your Code! 🎨

What is Carbon?

Carbon as they say themselves, let's you "Create and share beautiful images of your source code."

You can turn your boring code into a beautiful image like this:
Demonstration

Why would I use it?

Let me ask you, which one of these looks better?

const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj)

const compose = (...fns) => res => fns.reduce((accum, next) => next(accum), res)

const unfold = (f, seed) => {
  const go = (f, seed, acc) => {
    const res = f(seed)
    return res ? go(f, res[1], acc.concat([res[0]])) : acc
  }
  return go(f, seed, [])
}
Enter fullscreen mode Exit fullscreen mode

OR:

Demonstration

If you picked #2 then Carbon is perfect for you! And if you picked #1, suit yourself!

How do I use it?

It's pretty simple! Head over to the Carbon website and just paste your code into the box!

Woah! Not that fast... 👀

Carbon also has a ton of themes that let you customize your image! Personally, I use "One Dark" for my images.

The End.

Thanks for reading my post, if you liked it, please leave a ❤️ or even a Comment 💬!

🔗 Carbon's Website

Top comments (9)

Collapse
 
jonrandy profile image
Jon Randy 🎖️

If you're writing articles with code samples, then #1 above is ALWAYS a better choice - just an image of your code will serve to annoy readers. Actual text has many advantages over an image of text (accessibility, ability to copy, etc.). If however, you are stuck finding a header image for your article, then Carbon is definitely a good choice - I have done this myself.

Collapse
 
jacksonkasi profile image
Jackson Kasi

yes! I think it would be nice to have an option to copy the code in the margin of the image✨

Collapse
 
muchwowdodge profile image
Anton Rhein • Edited

#1 for anything that should be readable in an asynchronous manner (blogs, papers, handout slides), thus being capable of being searched or copied

#2 if you want fancy slides for a presentation you or someone else will do irl.

Collapse
 
fyodorio profile image
Fyodor

My b&w T-shirt says: “Code should be boring” 😄

Collapse
 
antonreshetov profile image
Anton Reshetov

You can also use massCode - github.com/massCodeIO/massCode

Image description

Collapse
 
amirhe profile image
Amir.H Ebrahimi

Cuase it is Rust-frontend trend year
Here is an alternative rust application let you to render the source code into a beautiful image.
github.com/Aloxaf/silicon

Collapse
 
rabiulhossen profile image
Rabiul Hossen

thanks

Collapse
 
orliesaurus profile image
orliesaurus

👀 PSA

If you click the "Tweet" this - it stores your image on twitter and you can't ever delete it - so be careful if you paste credentials

Learned this the hard way, sadly.

Collapse
 
israelchidera profile image
Israel Chidera

A short and very useful article right there. In love it.