How to Share Code and Make It Shine

We all have shared code in some way with friends, colleagues and even with the world! It may have been through emails, code blocks in documentations or articles, Github Projects or Gists. Now, for sure, the quality and design of your code is pretty important to make it shine. In this article, I’m only addressing the case in which your code is worth sharing by your own standards.

In the past few years, I’ve contributed to the development of two developer platforms - CodinGame and - which now count more than 900k developers in total. I’ve seen that the way you share your code affects its readability and influences the perception of readers, especially if they can interact with it and see what it does.

The best way to understand this is to actually have an overview of all the tools that are available to us and understand what you can do with them.

Ok, so what’s out there to share your code?

First, the non-runnable code snippets

Github Gists

If you’re a Github aficionado, you’re probably already using Gists. Github Gists are beautiful code blocks — they highlight the syntax for most languages. Every Gist is a fully forkable Git repository. Surely you don’t need that for any code snippet, but it certainly opens up a lot of possibilities. Here is what it looks like:

That’s a classic! allows you to store any kind of text for easy sharing. You can store up to 10 pastes per day as a guest, probably more than enough for a vast majority of users. The site offers syntax highlighting for more than 100 languages. If you don’t find yours in there, you must be coding in a very weird language.

At first sight, it looks very promising. It lets you store snippets of code in a wide variety of languages, and you can also use their playground mode, which lets you test the classic javascript-html-css combo. You do have to create an account to use the site: big miss here. I was also quite amused when I received an email from Codepad telling me that my code snippet “hello” just got popular…! But do share responsibly; who knows, you could be hired ;)

What about the runnable Code Snippets Sites?

Being able to run a code snippet makes it much more powerful. You don’t have to just hope that your code will work. You can test it directly, and anyone can test it and see what your code does — well, depending on the tool used -

JSFiddle is probably the default site you’ll be heading for if you want to share a working front-end example. You usually find JSFiddle completing a StackOverflow answer, even if Stack Overflow created their own homemade solution a few years ago. JSFiddle is not the sexiest snippet site anymore, but try to remember what you thought of it 6 years ago. It was so cool!

It is also embeddable on Medium to look pretty, but you cannot interact with it. For instance, you cannot display the HTML, CSS or see the result in the example below.

Same kind of tool as JSFiddle, but much more powerful. For example, it has different page modes and supports a lot of flavors of css, html and javascript. Codepen is currently one of the most popular tools, if not the best, used to show off runnable frontend code within articles. They describe themselves as a “playground for the front-end side of the web,” and that’s really what it is. What makes the tool even better is its community.


This plugin is a javascript tag that converts static code snippets into live and interactive snippets for the following languages: JavaScript, Ruby, PHP, Clojure, Python, C++, Lua and Scheme. The code is evaluated as you type: nothing better for a WOW effect in a technical article.

The number of languages supports is impressive. It also has a bunch of interesting options as part of its environment, such as adding new files and the ability to use stdin.

The main drawback I see is that you can’t modify the code in an embedded snippet, and you can’t embed the code anywhere if you wanted to. Unfortunately, their current focus seems to be on their classroom tool. Snippet

I guess is the new kid in town. The best way to understand what it can do is to check it out yourself, just below!

Below is some front-end code. Don’t hesitate to edit the code directly and click on Run.

What happened? Snippet lets you embed your code on any website that supports JavaScript or Embedly. So that includes Medium (and Coursera). Not only are the snippets runnable, but you can interact with their embedded version. When reading an article, there’s nothing more satisfying than tweaking a code example and experiencing for yourself how the code works.

Like, uses the official docker images for the snippets’ runtime for most of the languages (specific version detailed in our doc). This means that any new language can be added easily.

Finally, it has a viewer component that will display whatever the code is about. If it is a full web app, it will instantiate it, and you will be able to interact with the full web app directly from the viewer.

What happens for some back-end code? You can indeed play with a full API if you want to.

You can even have a full shell interface and interact with it.

Finally, the tool is free, very easy to use and you don’t have to sign up for anything. Check for yourself here.

What’s missing, then, on this tool? Deeper integration with Github to add the snippet to your repositories. The current platform lets you create short hands-on tutorials — named playgrounds — that are hosted and forkable on Github, but you can’t yet do that with the snippet.

Tools worth mentioning

Finally, is worth mentioning for node. You can see it running live in the getting started section for Express. The variety of options it provides is pretty impressive. Also, for some React, Vue and Preact, you should definitely check

Ok, so what’s the best one?

There are definitely a lot of tools out there, so I guess some comparison spreadsheet could be really helpful!

I guess it depends on your need. Some are powerful enough to cover all your needs, especially and Snippet. But, in any case, you should definitely have a look at several of them by yourself to see which one you feel most comfortable with.

What snippet sites do you use? Perhaps some I did not mention; there is a huge — old — list on Wikipedia. What features would you like to see and don’t have on any of those tools? As usual, any comment is welcome; don’t hesitate!