1 min read

🔥 Code Tips Sketch Template

People love to share coding tips on social media and I’ve seen some take screenshots of their editor and share it, or others might use a dedicated service that allows you to copy and paste your code into it. All these options are fine but I like to make mine standout by using something custom and I have a Sketch file where I can paste my code into it and then export.

Sketch Code Editor Templates

The way I have this setup is in your code editor screenshot the code you want to share (shift + control + command + 4) and then open the Sketch file and paste it in. The file currently comes with four artboards. Twitter light and dark, and Instagram light and dark.

In the included samples the code in the “light” artboards are from Sublime Text using the “Inspired GitHub Color Scheme” and the “dark” artboards are using the “Dracula Theme” in VS Code. The theme you use is really not important but I’m sure I’ll have people ask me what I used. Below is an example of one of my recent tweets using this template:

If you’d like to grab this file I have a zip available here. It’s made with the latest version of Sketch (v53.2) so it may not work with older versions. But you are free to do as you wish with this and consider it licensed under MIT.

Finally, if you have any feedback or would like to see any improvements please comment below. I hope you enjoy!