Image for post
Image for post
Photo by Chris Ried on Unsplash

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 `.

Image for post
Image for post

#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.

Image for post
Image for post

#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.

Image for post
Image for post

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.

Conclusion

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.

A note from the author

Thank you for reading this article — I hope you found this article useful and I look forward to your comments and feedback.

You can follow me on Twitter and connect on LinkedIn.

Written by

DevOps | SRE | AWS | GCP https://twitter.com/davelms

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store