How to embed Google Colaboratory into Medium in 3 steps

Google Colab (Jupyter Notebook hosted on the web) is a great tool for live-coding and visualization in python. I found it particularly useful in testing ideas from published research papers. Colab deals with all the environment configurations, and I can run code using GPU just with a browser.

Colab stores the .ipynb files in Google Drive, which can be easily shared to anyone, just like Google Docs. I usually share my notebooks with my friends when I found anything interesting. Recently I began to feel that I would benefit more if I could share Colab notebooks on Medium so that anyone reading my article could double check my code, criticize my thoughts, and of course, correct my mistakes.

Luckily, it is actually quite easy to embed Colab into Medium:

Step 1: Save Colab as a Gist (Colab -> File -> Save a copy as Github Gist)

Step 1: Export to Github Gist (Authentication might be required).

Step 2: Make the Gist public (Gist -> Edit -> Make public)

Step 2a: Click Edit on the top right

Step 2b: Click Make Public on the top right.

Step 3: Insert Gist URL into Medium article

Step 3: Insert URL. After typing ‘Enter’, it will embed Colab into your article.

Result:

Colab: https://colab.research.google.com/notebooks/welcome.ipynb

Gist: https://gist.github.com/lzhou1110/2a30a81cb8c175514ed627bc18016774

Embed:

Future improvements (Maybe?):

Normally I write a lot of explanations in Colab, not just the code. It is not very nice to embed a long Colab in Medium from a user experience’s perspective. It would be even more convenient for me if Medium supports importing Gist to Article directly. Please leave a comment if you know how to achieve it.

Thanks for the read :)

References:

https://blog.medium.com/yes-we-get-the-gist-1c2a27cdfc22

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