How to embed Jupyter Notebook into Medium Posts in three steps: 1–2–3!

This took me a good hour + a second pair of eyes (Ben’s) to figure out, so here is a quick step-by-step.

Before you start — note that this only works when used with the regular GitHub account. GitHub enterprise allows you to create gists but then they do not embed into Medium posts, they just appear as a weblink like this:

https://git.generalassemb.ly/gist/raisedrussian/ee04eef0eb1af81aabaa6bf327fc7dad.js

Creating a gist:

Go to you GitHub. In the top right corner find the “+” button and select “New Gist”:

Select new gist from the drop down menu in the top right corner

Alternatively you can gist google ‘gist’ or go to https://gist.github.com/ directly. Once you are there you will see this (an empty gist):

Depending on what you want to do, you may go two ways from here: type the code snippet in the gist window and use that OR get code from your existing notebook (or even gist the whole notebook!).

Quick and easy way: type in the gist

1. Create a gist : type in the window or copy past a snippet from your existing notebook:

2. Save it: Once you are done typing whatever you need, in the bottom right select ‘create secret gist’ or ‘create public gist’, depending on whether you want it to be searchable or not.

NOTE, that once you create it and it will take you to the gist, it may read your code as a text file .txt. Then you need to change it to .py by going to top right ‘edit’ icon and then manually changing the gist name (in blue) extension to .py:

Image on the left: Press ‘edit’ button in top right corner /// Image on the right: manually change file name extension from .txt to .py

Then click ‘update gist” green button in the bottom right corner of the page. That’s it! Now you can copy your gist address to embed it in your Medium post (to the right of the ‘Share’ button):

3. Post your JN snippet into Medium: paste it in your Medium post, so it looks like this (TA-DA!):

If it DOES NOT embed and looks more like a line of code (see below), make sure that you used ‘Share’ button when you copies your code, not embed or anything else:

https://gist.github.com/raisedrussian/b009caee3f117c65487452567affde99

Slightly harder way — post the whole notebook.

1. Drag and drop your existing Jupyter Notebook into the new gist window, it will look like this:

2. Save the new gist, make sure it saves the file as a .ipynb file, otherwise edit and save as we did above. It is important to save as .ipynb and NOT as .py, because here you are saving the notebook not just python code. If all goes well, it will look like this:

3. Copy the link from your browser (! don’t know why but this works):

…and paste in your medium post: voila!

Let me know if these steps don’t work for you and I will update the notebook! Thanks!