Embed a GitHub Gist Code Snippet in a Medium Article

Make Your Code Snippets Shine on Medium

Scenario

You are writing a Medium article, and wish to include code snippets, of any language, within the article.

Audience

Medium writers, usually about programming, who wish to include their programming language code snippets inside their articles.

Techniques

Medium allows you to include code snippets, of any language, in your article with 2 different techniques:

One: Use Command+Alt/Option+6 (on Mac) to add a code snippet block (grey colour). You can then copy from your IDE (e.g., Xcode) and paste inside the block. The result of the action looks like this:

Two: Use GitHub Gist to write your code, then add a link to it in the Medium article. This approach results in this code snippet, which looks a bit more colourful, but cannot be edited with bold, italics, etc.

In this article we shall focus on the GitHub Gist technique and how to effectively and efficiently use it to enhance and speed up your Medium writing experience.

GitHub Gist Setup

Navigate to https://github.com and sign up for a new account or login.

Create your Repository (e.g. MazenKilani/AppsGym in the image below), usually with initial LICENSE and a README.md files. Click on the repository name (e.g., AppsGym)

On the repository page, click on the profile photo and select Your Gistsfrom the dropdown menu

Click on the (+) Add button on the top right-hand corner

Fill up the required fields Description and File Name (including extension), then drop-down the green‘Create secret gist’ button (bottom right-hand corner) and select ‘Create public gist’ instead. The reason is that you can only share code from GitHub Gist to Medium from a Public Gist.

Then paste your code inside the Code Box, and click the now showing ‘Create public gist’ button (so, you practically have to click it twice, 1st to change from secret to public, then execute the publication of the public gist.

Once you created the public Gist, you can now perform the Embed & Shareactions. There is an important difference between Embed and Share: Embed gives you the <script> code and Share gives you the https:// URL.

What you need in Medium is to embed the URL (not the <script> code), so it sounds a bit confusing, until you get used to the idea that Medium and GitHub Gist are 2 different platforms, sometimes using different terminology.

Hence, in the Gist, drop down the menu to show Share, and the https:// URL, then click the Copy button (right-side of the URL).

Medium Article

In your Medium article, select the ‘Add an Embed’ icon

Paste the copied Gist URL then press <Enter> or <Return> key (important: must press Enter/Return key, as this action retrieves the code from GitHub Gist)

Now wait!

Medium will now retrieve the code from the GitHub Gist URL and show it within the article in a Gist window. Note: If you do not wait, you may end up with the URL as text!

The GitHub Gist window will show the code, with the bottom status bar showing the Gist File Name for reference.

The article showed the complete setup and sequence of actions to embed code from the GitHub Gist in a Medium article. Hope you enjoyed it. Thanks for reading!