5 Website To Help You Create Beautiful JavaScript Code Snippets For Your Medium Articles

While writing technical development articles you will often show some code blocks. You can either take a screenshot of your favorite IDE while it shows the code or you can use the simple Medium code formatting by pressing ```. But instead of using any of those two approaches, I would suggest using any or all of the websites presented within this article.

1. GitHub Gists

The main website to create code blocks is GitHub Gists. You can simply go to https://gist.github.com and add your code into the Gist. Also, you can add multiple files to one single Gist and use them independently in your article.

2. carbon.now.sh

This website is really simple. You can log in with your GitHub profile and start creating snippets. Go to and insert your code. It will be automatically saved into your profile and can be accessed by the URL.

As an example,  https://carbon.now.sh/XHGvwhmthQjAZLJAWNoA

The content will look like this in Medium:

3. JSFiddle

JSFiddle is a famous javascript code playground where you can test your HTML, CSS, and JS in the browser.

Additionally, these code blocks can be imported into Medium as an embed. Within Medium you will have one block with a tab menu that can be switched.

I use this fiddle as an example: https://jsfiddle.net/paulknulst/odLg3qu1/

As you can see you can switch between JavaScript, HTML, CSS, and Result. Within Result, you can see the outcome after the three “files” are combined and run by jsfiddle.net.

4. Codepen.io

Codepen is comparable to JSFiddle. You can also add HTML, CSS, and JS and import them into Medium.

I use this as an example: https://codepen.io/paulknulst/pen/NWaXwdW

As you can see you can switch between JavaScript, HTML, CSS, and Result. It looks different from JSFiddle but contains the same information.

5. Codesandbox.io

With Codesandbox.io you are able to create complete sandboxes for your project that will run within the browser.

If you start with this website you can choose a sample sandbox from a list of predefined sandboxes

After you choose your template all needed files will be created and you can change them in the integrated IDE and see the result in an embedded browser window.

I really hope you find this article helpful and can use any of the websites in your development articles.

Tsuki