Embed Github Gist in Medium Article

There are two ways to embed code in Medium articles. The first is to embed it directly by copying and pasting it and the second one which is the preferred way is to use Github Gists to embed the code in the article.

Embedding Code Directly in Medium Article

The first is just press the following :

1- Command+ Option+6 if you are using Mac

2- Control + Alt + 6 if you are using Windows or Linux

and a grey window like the one shown below will appear and where you can just paste your code in it:

public class MainActivity extends AppCompatActivity{   
@Override   
 protected void onCreate(Bundle savedInstanceState) {             super.onCreate(savedInstanceState);            setContentView(R.layout.activity_main);      
}

Embedding Github Gist in Medium Article

The second way and for me it’s the preferred way is to create a Github Gist and then embed it in the article. To create a Github Gist, just go to this link:

Discover gists

and here you can create your own Gist as shown below. You need to give your Gist a file name with extension for example, here I’ve used MainActivity.java so the file name is MainActivity and the extension is java. Whatever your programming language is, make sure to name your Gist with the correct file extension like .html, .js, .ts, .swift, .java, .kt, etc. You can also provide a description for this Gist and then you need to paste your code in the large window as shown below.

To be able to embed the Gist in a Medium Article you need to create it as a public Gist so choose “Create public gist”.

Now after clicking on “Create public gist”, the Gist will be created as shown below.

All you have to do now is copy the url of this Gist page and come back to the Medium Article and then when you click anywhere in the story article, the plus button shows up when you click on it, it opens the below menu just choose the code fourth icon.

Then you will be asked to paste a link to embed content from other site and now paste the url you’ve just copied and press “Enter” and voila the Gist will appear.

And that’s how you embed Github Gist in your Medium Article. Enjoy!