Use CodeSnappy for good looking code snippet images · vanrossum.dev    

       vanrossum.dev 

 Article

Use CodeSnappy for good looking code snippet images
===================================================

 ![](https://vanrossum.dev/images/jeffrey-portrait.webp) By Jeffrey van Rossum

  vanrossum.dev  

  [      vanrossum.dev ](https://vanrossum.dev)                      

  [ ← Writing ](https://vanrossum.dev/posts)   [ ← Writing ](https://vanrossum.dev/posts) [ Introducing CodeSnappy ](#introducing-codesnappy) 

Yesterday, I posted a Tweet that included a screenshot of a code snippet. Before I could take the screenshot I needed to toggle some settings in my code editor (VSCode), and afterward, I thought: why not make a simple tool to make that process a little quicker, easier and even nicer looking.

> Just found out that [@Tinkerwellapp](https://twitter.com/Tinkerwellapp?ref_src=twsrc%5Etfw) supports [\#WordPress](https://twitter.com/hashtag/WordPress?src=hash&ref_src=twsrc%5Etfw) as well ? Quick tip: if you run into any database-connection errors, try pointing 'DB\_HOST' to your MySQL-socket. [\#tinkerwell](https://twitter.com/hashtag/tinkerwell?src=hash&ref_src=twsrc%5Etfw) [pic.twitter.com/pfiZOS67eL](https://t.co/pfiZOS67eL)
> 
> , Jeffrey van Rossum (@jeffreyrossum) [March 11, 2020](https://twitter.com/jeffreyrossum/status/1237680690931666945?ref_src=twsrc%5Etfw)

Introducing CodeSnappy
----------------------

![Example snippet](https://codesnappy.io/github/snippet-example.png)

[CodeSnappy.io](https://codesnappy.io) is a tiny web application that makes it easy to quickly create a nice looking code snippet image with syntax highlighting.

It has been built with [Vue.js](https://vuejs.org/), [Vue Prism Editor](https://github.com/koca/vue-prism-editor), [html2canvas](http://html2canvas.hertzen.com/) and [TailwindCSS](https://tailwindcss.com/).

If you would like to contribute to this tool, don't hesitate and contribute on [Github](https://github.com/jeffreyvr/code-snappy)!

  ![](https://vanrossum.dev/images/jeffrey-portrait.webp) Jeffrey van Rossum [@jeffreyrossum](https://x.com/jeffreyrossum) 

 share [𝕏](https://twitter.com/intent/tweet?url=https%3A%2F%2Fvanrossum.dev%2Fposts%2Fuse-codesnappy-for-good-looking-code-snippet-images&text=Use+CodeSnappy+for+good+looking+code+snippet+images) [WhatsApp](https://wa.me/?text=Use+CodeSnappy+for+good+looking+code+snippet+images+https%3A%2F%2Fvanrossum.dev%2Fposts%2Fuse-codesnappy-for-good-looking-code-snippet-images) [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fvanrossum.dev%2Fposts%2Fuse-codesnappy-for-good-looking-code-snippet-images) 

   © 2026 Jeffrey van Rossum 

  vanrossum.dev vanrossum.dev