Coders — How to add source code to your Medium articles

Sherlynn
2 min readJan 1, 2019

So as I was writing an article pertaining to coding work, I knew that I could add Code blocks & Inline code as a feature provided by Medium.

Code block

To begin a code block, on a new line type in ``` (triple backtick).
Keyboard shortcut: ⌘ + Opt + 6 / Ctrl + Alt + 6.

This is 
an example of a
code block

Inline code

For inline code in a paragraph, type a single backtick ` to begin and end your code. Or highlight some text and press the backtick key.

An example of an inline code

Note: Code blocks and inline code are not supported on mobile.

Adding Source code

At times, I would prefer to display the source code especially when the code is lengthy. This provides for better readability and added color.

We can use Github Gists, Codepen.io, or JSfiddle. Paste your snippet URL from one of those sources to a new line in the editor and press Enter. The Source code will be embedded automatically.

A walkthrough for using Github Gists:

Example code:

<html>
<head>
<title>How to add source code to Medium</title>
</head>
<body>

</body>
</html>

Step 1: Log in to your GitHub account. https://github.com/

Step 2: On the right of the navigation menu, click on the + and select New gist

Select “New gist”

Step 3: Enter in the Gist description, filename with the extension and the code as per below.

Enter Gist description, filename and add code

Choose to create private/public gist

Gist created with Syntax highlighting

Step 4: Click Share to get a shareable link for the gist

Step 6: Paste the GitHub gist link in your article. Hit enter. The gist will turn into source code automatically:

Ta-da!
Hope this helps someone.

Sherlynn