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

--

--

Elizabeth Westphal
Elizabeth Westphal

Written by Elizabeth Westphal

Lover of science and statistics, I write short data-backed articles and always cite my sources!

Responses (1)