5 Ways to Add Code Blocks to your Medium Article

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…