If you write about programming topics (if not, start now, writing makes you a better programmer), you often need to include code snippets in your posts. Let’s review what are the best tools for creating and sharing your own source code snippets online. We’ll use this simple PHP code excerpt as an example in the rest of the post.

Let’s see what are the best alternatives to share a code excerpt online.

The simplest choice: Code as text

The simplest solution is to just copy and paste the code in your (WordPress) post editor surrounded by a pair of <code> HTML tags.

The advantage is that this way the code stays within your site, it can be indexed together with the post and you can easily modify it at any time. The main con is that the visualization of the code is rather ugly and that there is no easy way to share the code itself separately from the post.

Visualization can be improved by using a third-party plugin. In this blog, I use WP-syntax (rather old but still working). It provides clean syntax highlighting using GeSHi — supporting a wide range of popular languages.

An example of PHP code directly embedded in this post

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

		$day_parsed=date_parse($today->format("Ymd"));
 
		$args = array(
			'post_type' => 'post',
			'post_status' => 'any', // we also want the drafts
			'nopaging'=>true,
			'date_query' => array(
				'relation' => 'OR',
				array(    // returns posts created today
					'year'  => $day_parsed['year'],
					'month' => $day_parsed['month'],
					'day'   => $day_parsed['day'],
				),
				array(    // returns posts modified today
					'column' => 'post_modified',
					'year'  => $day_parsed['year'],
					'month' => $day_parsed['month'],
					'day'   => $day_parsed['day'],
				),
			)
		);
 
		$query_day_posts = new WP_Query( $args );
 
		$posts=$query_day_posts->get_posts();

Nothing really spectacular but if you just have something small to show and don’t need to reuse it in other contexts, this works well enough.

The obvious choice: Gists

Gists are GitHub’s solution for sharing your code online. Every gist is a Git repository and therefore they can be forked and cloned as any other GitHub project. If your software project is already hosted on GitHub, Gists are a natural choice. But you can use Gist even if your project is hosted elsewhere.

See our PHP sample code as a Gist

Code as beautiful images

Carbon helps you transform any piece of code in a coloured image. Plenty of themes, fonts and colors are available. Carbon also recognizes your language and uses the language grammar to detect and higlight keywords and other special characters.

Once you’re done you can export the generated image and paste it in your post or share it on social media (in fact, you can directly tweet it from Carbon itself). By the way, Carbon itself is open source software. Obviously, in contrast with the two previous solutions, here you’ll need to regenerate the image every time the source code you’re sharing changes.

Our sample code in Carbon

CodeZen is almost an exact replica of Carbon. You can show the line numbers so if this is important for you, give it a try.

CodeGraphics is another similar tool. Here the difference is that CodeGraphics allows you to enter additional text above and below the code snippet.

Instead, Marmoset goes beyond previous tools and allows you to add a huge number of filters and special effects to your code (see below). Obviously, if you want the code to be readable, this tool may not be the best option. However, if you want to make some spectacular representation of the code, experiment with this tool!.

Marmoset interface to add special effects to your code displays

The VS Code solution to share code snippets

Given the huge popularity of the Visual Studio Code editor , it’s not a surprise to find an extension in the VS Code marketplace to share code: Polacode, the polaroid for your code.

It’s (on purpose) a very simple extension that, in short, allows you to easily take a kind of “screenshot” of code you’re editing and store it as an image.

BONUS: Create a poster from your source code

Not exaclty the most convenient way to share your code, but if your goal is more to display your code as a work of art (you know, some people believe programming is, more than anything, an artistic endeavour), take a look at commits.io.

For a modic price you’ll be able to point to your code, choose a background image and create (and get delivered) something like this.