If you want to show source code in a page or blog, create examples of running HTML/CSS/JavaScript code, or sample React/Angular/Node.js applications – you can use external services that allow hosting, versioning, embedding and even running applications.

I have checked several of them and each solution has both advantages and drawbacks. I don’t think it is possible to select a single service and use it for all cases, because they were created to fulfill different needs and different complexity.

In this article I present Github Gist, Codepen, JSFiddle, Glitch and StackBlitz, giving examples of what they could be used for.

Hosting services

There are numerous options to host and share source files. I have tried the following ones:

Name	Social features	Formatting	Line numbers	Line highlights	File name	File types	Execute
GitHub Gist	Yes	Yes	Yes	No	Yes	Arbitrary	No
Codepen	Yes	Yes	No	Only by link, not in embedded	No	Limited	Yes, static files
JSFiddle	Yes	Yes	No	No	No	Limited	Yes, simple applications
Glitch	Yes	Yes	Yes	No	Yes	Arbitrary	Yes, applications
StackBlitz	Yes	Yes	Yes	No	Yes	Arbitrary	Yes, applications

Explanation (all except the first and last refer to the source code being embedded on my site):

• Social features – easy to share with and expand by others (so-called fork)
• Formatting – coloring of code according to the file format
• Line numbers – display line number in every row
• Line highlights – allow highlighting selected lines for attention
• File name – display file name
• File types – how many file types are supported; “limited” means usually HTML, CSS and JS.
• Execute – ability to run the source code, edit files anonymously and immediately observe changes and embed runnable scripts

Let me summary the services briefly:

GitHub Gist

Good for sharing a single file, with versioning and discussion. There is no possibility to execute the code and see live result.

Why not suitable for embedding to me: I didn’t like the formatting.

• 

• 

Codepen, JSFiddle

Good for sharing static web examples, consisting of one HTML, one CSS and on JavaScript file (with variants, e.g. SASS instead of CSS or TypeScript instead of JavaScript), sometimes with external libraries available. Both services allow to execute the “application” to see the result and immediately experiment with source code.

Codepen:

• 

• 

JSFiddle:

• 

• 

Why not suitable for embedding to me: lack of line numbers, limited file types (how to show JSON? XML?).

Glitch, StackBlitz

They are great for creating more complex examples or applications, consisting or any amount of files. Glitch offers more Node.js applications, whereas StackBlitz is the only to offer Angular applications. Again, a user can interact with the files to see the results immediately.

Glitch:

• 

• 

StackBlitz:

• 

• 

Why not suitable for embedding to me: they load slowly (iframe) and seem to be an overkill for sharing a code snippet.

Summary

All of the online tools I just listed are great for their specific tasks and I keep using some of them for hosting bigger samples or applications. However, for displaying source code in my blog I chose something different. I write about it in WordPress for developers – displaying source code and review of code sharing services.

Want more?

• Google Analytics – alert when real-time value changes
• Windows boot & disk repairing toolkit
• WordPress – responsive tables with headers in Gutenberg editor
• My favorite graphing tool – Graphviz
• Trello Power-Up to hide labels and fields from card covers

Share!