5 Ways to Add Code Blocks to your Medium Article

Elizabeth Westphal
2 min readApr 8, 2022

My first few articles use screenshots of my code on an editor or the output of the console, but Im looking for a more elegant solution. In this article I’m going to test out different ways of writing code on Medium to see if we find a winner. Please comment your favourite at the end!

1. The Grey Box Method

let message = 'Hello Medium Readers';message += '!';console.log(message);

This method is done by pressing Cmd + option + 6 on a mac, or Ctrl + alt + 6 on windows. A grey box will appear in your article that you can either type or paste your code directly into. This is better than a screenshot stylistically (in my opinion) and it allows the users to copy and paste the code into their own editor. The downsides I see are no syntactic colour code like you would have in an editor and there is no line numbering.

2. Inline code

This method earns point for simplicity. Simply type a single backtick (`) character then type your line of code. To escape the box, press the right arrow key. Here’s an example of how the code will look let message = "Hello Medium Readers!" .

3. GitHub Gist

Two things I like about this one: it creates a link to your GitHub page, and it has line numbering. It’s also very quick to make one. Just go to your GitHub page and click here:

Create a new gist and paste the shareable link in the <> section of your article and press enter. The code will appear immediately.

4 . Codepen

You do need to create an account to use code pen, but the result is interactive and works beautifully to…