How to Use Gists to Show Code Snippets

You don’t need to make a new Gist for each code snippet. Instead, display a single file from a multi-file Gist

Photo by Luke Chesser on Unsplash

A GitHub Gist is arguably the best way to display code snippets in a Medium post. Syntax highlight alone makes it the ideal choice. A Gist will typically consist of multiple files, which inevitably leads to the question: how do I display an individual file? Unless you're a web developer, the answer is not obvious. This post will answer that question.

You can select a file from a Gist with multiple files by appending the URL with: ?file=fileName

Basics: how to insert a Gist

To insert a Gist into your post, simply copy the URL into the Medium editor and hit enter. Voila, you have some nicely formatted code displayed.

This is the output of

The code above was displayed using the following URL:

However, this usually is not what you want. Typically you want to only display one file at a time.

Selecting a single file

To select a single file from a Gist all you have to do is append the URL with this:


where <name> is the name of a file in your Gist. Using the Gist above, <name> could be or .

For example, this would be the URL to display

This is the output of

While appending ? to the URL displays the file:

This is the output of

Final thoughts and video demonstration

I hope this short post helps technical writers use Gists more effectively. Don’t make my mistake and think you have to make a new Gist each time you want to display a different code block. Instead, simply append the URL with ?file=<name>.

A video demonstration of this post

Climate scientist @ Columbia University. Studying the global carbon cycle. Scientist | Programmer | Dog dad

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store