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!" .
