Embed GitHub gists in Medium posts: Step-by-step guide
Using GitHub gists to display code in medium.com posts.
Code in Medium
There are several viable ways to display code in your Medium posts which suit different goals. Please see my previous post to get a handle on the following:
- Medium code blocks
- Medium inline code
- Images
- Embeds
Embeds
You can use an external program to host the code and embed the content into the article.
Benefits of embedding code
- Preservation of lines for readability (no forced overflow of longer lines to the next).
- Easy for readers to use. Just copy and paste (which you can’t do with an image).
- You can update the content agnostic of the post its self (you don’t need to edit the article).
- Syntax highlighting from the external tool. This is useful if there are a lot of keywords from the language; it looks and feels right for self-contained chunks which are more than a couple of lines and is really important for longer blocks as they can be quite hard to read with default medium code highlighting.
- Extended functionality. This can could be just syntax highlighting as described above but could also be more feature rich e.g a code execution environment for a more interactive experience.
The most popular of these types of integrations (I think) is the GitHub gist.
GitHub gists in Medium
- First create a public gist or identify the gist you want to use. https://docs.github.com/en/free-pro-team@latest/github/writing-on-github/creating-gists
- Go to the gist. On the upper right-hand side there is a panel with “What do you want to do?”. Click on this and click the ‘Share’ option. This is where I always used to make a mistake! Do not click the ‘embed’ option. Medium does not let you embed Javascript.
3. Then click the little clipboard to make the link available for pasting into Medium.
4. From the Medium Post Editor then simply go to a new line, paste the link and hit enter. And you will get the outcome as shown below. You will know you have done it right because the gist will render directly in the editor view.
Medium References
This Medium Help Article goes into a bit more detail about Embedding code:
