Code to Image – Share Screenshots of Your Code on Social Media

In:

Posted:


A free tool to help you make screenshots of your code snippets

Iโ€™m not a coder, I wish I was. For those of you who are, sharing screenshots of code snippets on social media is a great way to showcase your abilities, and of course build a following.

Whether youโ€™re looking for work on Twitter (or other social media platforms), and need to build an audience with juicy screenshots of code snippets to lure in potential employers.

Code To Image

Or you just like to share things youโ€™re working on, Iโ€™ve spotted this rather useful, and (might I add) totally free tool.

Built on WordPress, CodeToImage, enables budding developers to share screenshots of their code, as a downloadable image. Pretty cool right?

While that sounds short and sweet, not unlike this blog post. Thereโ€™s a bit more to it, than just downloading an image of your code.

Over 60 code box styles available

Yes, you read that right, there are over 60 styles for the code box, varying from light, to dark and everything in between.

Example one:

material example of code box

Example two:

eclipse example of code box

Languages supported

Currently, there is support for JavaScript, CSS, SQL, Swift and Go. Each code snippet will highlight the specific elements of code, depending on the language selected.

Adding code

Adding code, is a simple affair. Simply click in the box, and add your code. Thatโ€™s it. Take a look at the below GIF for an example, as well as enabling the option to display window controls.

editing / adding your own code

Colors and gradients, fancy stuff

If youโ€™d like to make your code snippet stand out, thereโ€™s a handy color wheel, choose a complimentary color, or if youโ€™d like a custom gradient, youโ€™re catered for as well:

Example of gradient and color

Add some padding and export

Need more space for your snippet? Clicking on the gear icon allows you to do just that, as well as turn the windows control, on or off:

Adding padding and export

Once youโ€™re happy with your result, export as a JPG, PNG, or copy to your clipboard. A nice, simple, and easy-to-use tool, so next time you need to share code as an image, check out Code to Image.

Subscribe To My Newsletter


2 responses to “Code to Image – Share Screenshots of Your Code on Social Media”

  1. Andy Feliciotti Avatar

    Thanks for sharing this Ben!

    1. Ben Avatar

      No worries, a useful tool ๐Ÿ‘๐Ÿ˜€

      I like it and can see how it could help others!

Leave a Reply

Your email address will not be published. Required fields are marked *

Default Avatar
Choose an Avatar