Colored Code Snippet for Medium.com

Jinook Jung
Level Up Coding
Published in
4 min readMar 6, 2021

--

We want this in Medium!!!

If you are a software engineer (or at least a student in the field) and have your blog account on Medium.com, then chances are that you probably feel what I have felt quite a long time. WE NEED BETTER CODE SNIPPETS!

Here is what you might be doing for your code snippets (more like blocks), by using triple backticks (```):

class AppController < Sinatra::Base
get "/" do
"Hello World"
end
end

It practically communicates, but… we want MORE, like line numbers or colorization. Is there a way? YES, there are! I will share with you 2 ways to do that, but, before that, please make sure that you have a Github account (I assume that you already have one as a software engineer~^^) because you need it.

Way #1. Adding an Embed with GithubGist

The first way is by using ‘Add an embed’ function in Medium. Here is what it looks like:

This is what you see when you have a new paragraph. Click the plus circle!
Can you find ‘Add an embed’ option???

Of the popup circles, choose the one with “<>”, and now you just need an embed address from GithubGist. To access your GithubGist account, you simply add ‘gist’ in place of ‘www’ of your Github address: “https://gist.github.com/your_account_name/

Then, on top right corner you will see 3 icons:

Notification, Plus, Account

Click the ‘+’ icon and you will see a box for your code snippet:

In Dark Mode

With the description on top, you fill the filename and your code with line numbers and colorization. Once you finish, simple click the green button on the right bottom corner (you have options of ‘secret’ or ‘public’). And, go to your snippet page and you will see this:

Just below the 3 icons mentioned before

Change “Embed” into “Share”:

Then, copy the address and paste into Medium ‘Add an embed’ option, and ENTER!

Remember the circle with ‘<>’?
You will see this instruction.
Now paste your SHARE address, and ENTER!

Tada!!! You have a beautiful code snippet in your Medium blog.

Way #2. Using a Browser Extension, Code Medium

The other way of have a nice colored code snippets in your Medium blog is using a browser extension. To use this extension you need either Chrome of Firefox. Code Medium is a browser extension that will allow you to bring your GithubGist code box directly into your Medium editing window.

Search Result in Google Chrome Web Store

You simply add this extension to your Chrome (of Firefox) and a popup window will ask you whether you will allow the connection between the extension and your Github account. After connecting your account to the extension, just follow the creator’s instructions like below:

Nice gif~

This editing window will open for you to enter your code block, and you will have the same result as the Way #1 I explained:

Now we remove one of our biggest life problems as a software engineer^^!!! If you need more info for Way #2, you can visit here. Therefore, friends~ Happy coding~~~

--

--