How to add a code snippet to your medium post.

I was trying to put together my first ever technical article on Medium — the post that will finally make me a technical writer and then as I started putting together my thoughts, problem came in early, how do I add code snippets to this post and make it look superb.

I searched the internet and found some. Some straightforward, some others had too much text — maybe in a bid to make the post worded, some others I couldn’t make out the process, just too complex. So, I decided to put together something to help others get their code snippets up on their posts easily.

This is for you if you DO NOT care about code highlighting;

The trick is a simple combination of keys

cmd + option + 6

for windows users — it’s

ctrl + alt + 6

The above combination gives you the gray box and then you can add your code. Now that looks better than simply printing it to screen 😁.

This is for you if you care about code highlighting;

The trick is to add the code medium extension to your Chrome browser or Firefox. You don’t want to go through the long process of creating a GitHub gist and then coming back to add the link and all that.

Under the hood, the extension does same but it saves you all the hassles possible.

First, you install the plugin

Captured from my computer.

After installing it, you should see this icon in your browser — this is a chrome illustration, might be different on Firefox.

The green icon is what you are here to see .

Create your medium post and then click on the add + icon that shows up on the left to add something extra to your article.

The green arrow up and arrow down button is what you should look at 😁

When you click the green arrow up and arrow down button (it looks highlighted but it is not necessarily highlighted, that’s the colour of the brand). You click that button, and then you should be prompted to login with GitHub, the normal authentication process and then you proceed to next step as is in picture below;

As you can see the buttons are disabled.

Now until you add your code and add a filename, the buttons will not be enabled, the gist description is optional but a nice to have.

Now the button is active.

And when you click on create secret gist / create public gist, it will show up like this in your post .

Thanks for reading till the end 😁.

Refresh your browser when you are done, sometimes it requires you to refresh your browser to make the icon show up.

All thanks to the makers of code medium, they have made it easier for us to add our code snippets and it still comes out beautiful 😍. The extension is open source and you can find them on GitHub.