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…