6 Ways to Embed Source Code in Medium Articles

4 min readMar 28, 2020

I recently wrote my first article on Medium (you can read it here). The problem I stumbled upon was that I didn’t know how to paste the source code into the article. I tried to use default code formatting, but it looked terrible. I also tried to screenshot my code, but it was an even worse idea because nobody could copy it.

Eventually, I managed to embed the code using GitHub Gist, but I wasn’t fully satisfied with what I got. Then I decided to do quick research on apps and tools we can use to embed the source code in Medium articles. Here’s what I found.

1. Embedding code directly in Medium

Ok, I don’t want to say that’s the worst option — it’s still better than pasting screenshots. If you want to create a code block in your article, type:

Command + Option + 6 (on Mac)
Control + Alt + 6 (on Windows)
Control + Alt + 6 (on Linux)

It does the job… partially because it doesn’t support syntax highlighting. Using this method your snippet will look like this:

import React, { useState, useEffect } from 'react';
import BookList from './BookList'; const BookListContainer = () => {  
     const [books, setBooks] = useState([]);  
     const [isLoading, setLoading] = useState(false);
     useEffect(() => {
          setLoading(true);    
          fetch('/api/books')
               .then(res => res.json())      
               .then(books => {
                    setBooks(books);
                    setLoading(false);
               });
     }, []);     return <BookList books={books} isLoading={isLoading} />;
}; export default BookListContainer;

2. GitHub Gist

That’s a better idea. Just go to GitHub Gist page, paste your code there, name it and save by clicking Create secret gist or Create public gist.

Remember: Syntax highlighting will work only if your filename includes the right extension (ex. myComponent.jsx for React files).

After you save your snippet you can choose the Share option and copy the link.

Then you paste that link into your Medium article and it magically converts into a snippet. By using this method your code will look like this:

Example GitHub Gist snippet

3. Glitch

Sometimes your code is a little more sophisticated — you’ve got it split into many different classes and you also want to present the file structure. Pasting the column of Gists would be at least not elegant. Fortunately, there are other tools that allow you to host even a complete project. One of them is Glitch.

Glitch is much more than just another snippet tool, but in this article, I’d like to focus only on that particular feature.

To start with Glitch just follow this link and then click the New Project button. You can choose a template or clone a project from your Git Repo. If you want to share your code, click the Share button, choose the Code tab and copy a link below.

Then you paste your link into your Medium article and it automatically converts into a snippet. You can see the result below:

Remember: Anonymous projects expire after 5 days. You will need to create an account to save your progress.

4. Repl.it

Repl.it is a great tool, that not only allows you to embed your code, but also to run it in the browser. It also supports all popular languages and frameworks.

To create a snipped you will need to follow this link and then click +new repl button. Then you can choose the language and click the Create Repl option. After you paste your code, you can click the share button, copy the Share link and paste it in your article.

Here’s an example code in Python. You can click the Run button and see what happens:

5. CodePen (only for JS, HTML, CSS)

CodePen is another tool for embedding working examples of code, but it only supports JavaScript, HTML, and CSS. It’s great for sharing web app sketches and allows you to play with the code and change it dynamically.

To share the code you just need to copy the link of your pen and paste it directly in your article. It should automatically convert to something like this:

6. CodeSandbox (only for web projects)

For light web snippets, CodePen seems to be perfect, but if your project is more sophisticated or requires using additional libraries and frameworks, you should pick CodeSandbox.

CodeSandbox is an instant IDE and prototyping tool that allows you to write and run code in your browser. After creating a new project you can embed it in your article by clicking the Share button and then the Copy Sandbox Link. When you paste that link on Medium it should turn into something like this:

Thank’s for reading this article! If you have any questions or feedback feel free to leave a comment!

Happy coding!