Create beautiful code snippets for websites #Shorts

My first try at shorts and a super quick tutorial how to create beautiful code snippets - which you can export, save as an image, convert to an iFrame and much more! Have fun and keep coding! 🔥

MUSIC BY ► @epidemicsound

#developer #tutorial #shorts

[viclim]

2 years later, and I find this very useful. Thank you so much !

[rakaa]

that is so helpful, i was wondering while using instagram that how are theese snippets are made and you made a short about them thats some helpful stuff Filip keep posting!!

[tahirmathin]

This was actually helpful, now I don't need to style my divs like crazy to make them look like code snippets, thanks

[ewliang]

I was always wondering how people made those. Thanks!

[sunilsala]

i was searching for something like this for month i cannot tell you how thankfull i am for this

[pk-fiok]

Whenever you have some code (in a language of your choice) written in a notepad (eg.), press PrintScreen. You will have your cool image. No need to "share & like & subscribe". You don't even owe me a beer ;)

[mehregankbi]

every 60 seconds in africa, a minute passes haha.

jokes aside, i'd have liked it more if you talked about embedding the snippet in the HTML/css rather than just using the image.

[grahamthedev]

Please, do not do this!

Images of code are not accessible for people who use assistive technology such as screen readers.

Additionally it means that if someone wants to copy your code they have to manually type every single line out by hand and if you are showing code the odds are you want people to actually be able to use it.

By all means use it for a cover image or for social media as an interesting "hook", but **always** include an actual code snippet on your own website and a link to a Gist or CodePen etc. if using it on social media.

[Fubbel]

That is cool but only if it's purely for decorative purposes. Please don't post images of code if there's even the slightest chance someone's gonna need to copy it or search it. Imagine your future employer seeing your code, thinking "hey, that's cool, I'm gonna try that", then realizing it's an image. They will 100% go for another candidate.

[nihblore]

There is also a vs code extension called CodeSnap which also does the same thing but in the editor itself

[MrTStat]

There is like a million plugins to do this, whats new?!