Tutorial : How to Add Source Code to Your Medium Article

All About Code
2 min readJun 20, 2022

There are 2 ways to add source code to Medium articles: block code and Github gists.

Block Code

Here is an example of a block code

There are 2 ways of creating a block code.

  1. Create a new line and then type this: ```. This will open a new code block.
  2. Another way to do this is to select a block of text, then on Mac do this command: CMD + option + 6

Note: Block format doesn’t highlight syntax by color, the only thing you can do is apply bold/italic styles to highlight the important code parts.

Github Gists

Step 1: Login to https://github.com/

Step 2: Select New Gists

Step 3: Provide a Gist description, file name with the extension and the code sample as shown in the screen below.

Step 4: Select Create secret gist or Create public gist, depending on your privacy need.

Step 5: Click on Share to retrieve a shareable URL for the Gist.

Step 6: Paste the GitHub gist link. Press Enter (this part is important). Your URL will convert to code with color in your Medium article as shown below.