5 ways developers can embed source code into a Medium article
Tips on how developers can include source code within their Medium articles.
There are several quick ways for developers to share code snippets within their Medium article. We’ll explore five ways in this article.
#1 — Inline code
Inline code can be inserted using a single backtick character `.
#2 — Block code
A multi-line block of code can be inserted using a triple backtick combination ``` or by typing CRTL + ALT + 6. You can also highlight a piece of existing text and use this combination to convert it.
#3 — GitHub Gists
If you have just a single piece of code you want to embed, then an easy option is to create a public gist at GitHub Gist. Copy the shareable link for the gist using the dropdown menu.
Pasting the link into your article will convert it automatically. If the file format is recognised, you’ll get syntax colour coding (better than the grey block background with the native inbuilt options).
#4 — Repl.it
Repl.it is embeddable, requires no prior setup, and is also collaborative so your team can work on the code together. It’s a great tool for quickly starting, sharing, and developing projects in any programming language, right from your browser.
It’s also great for dropping to Medium articles (paste your repl link) … and better still, it can show the code running as well.
#5 — Glitch
Glitch is our fifth and final method we’ll mention today, and it allows you to display more complex project structures — a bonus over a simple Gist embed.
In your project, head to Share and Embed This Project. On the pop up window, you’ll find the Medium embed link to copy and paste into your article.
You’ll see below that we can present multiple files in one embed.
In this tutorial we walked through five techniques for embedding code into your Medium article. The simplest technique, but least elegant, is to natively use inline or block-level code.
Luckily Medium is able to embed from external sites, and some examples for developers are GitHub Gists, Repl.it, and Glitch. Other options exist, and it would be great to hear in the comments which ones you use for your articles.