How to add code highlighting in Medium articles without leaving the editor

The current way

Medium can display both inline and multi-line code blocks. None of them supports syntax highlighting:

<html>
<body>
<span>Hello World</span>
</body>
</html>

A workaround is to embed existing GitHub Gists. To do so, you can use the “Add an embed” button:

After pressing the button, paste the gist URL and press Enter to add it to the article:

It’s quite annoying

You must go to GitHub to create the gist:

  • Go to GitHub
  • Create the gist
  • Copy its URL
  • Go back to Medium
  • Paste the URL

What if you then realize you made some mistake in the code?

  • Back to GitHub
  • Find the correct gist
  • Update it
  • Back to Medium
  • Re-add the gist or reload the page

This becomes annoying when you create a lot of gists for your articles.

An easier way

Is there any way to simplify this at least a little bit?

True, we still have to use gists.

True, we still have to clutter our GitHub account with an endless amount of them.

But is there a way to make creating and updating gists a bit faster or easier?

The solution I’ve come up with is Code Medium: a browser extension for Chrome and Firefox.

It lets you create and edit gists right from the Medium editor.

Code Medium

It adds a button in the text toolbar for creating a new gist:

You can also double-click an existing gist to edit it:

You can delete existing gists from your account by pressing the “Delete gist” button.

Suffice to say, you must own the gist to be able to do so :)

NOTE: The extension uses the GitHub Gist API. As such, you have to log in with your GitHub account. A login button will show up the first time you use the extension.

Installing it

You can install it from the web store:

The extension is open source, you can find the source code on GitHub.

Multi-file gists

In GitHub, a gist can contain more than one file.

A way to simplify the experience even more would be creating a dedicated gist for each Medium article.

You would then add a new file for each code snippet in the article.

This would reduce the clutter in the GitHub account.

I wish it was possible.

Medium uses Embedly for embedding gists but doesn’t support embedding a single file.

If you try to embed a single file, it will also include all the other files in the gist.

Looks like we have to give up on this idea for the time being.

Limitations

The extension has limited support for multi-file gists. The reason is keeping the user interface simple for the most common use case.

  • Currently you can only create single-file gists.
  • When double-clicking on an existing multi-file gist, only the first file will show up in the modal. Note that you can still edit that file or delete the whole gist.

What’s next

For the next versions I want to look more at how Medium works under the hood.

Is there any workaround for embedding a single file from a multi-file gist?

Medium also supports other providers, such as JSFiddle.

JSFiddle

JSFiddle is “only” useful for HTML + CSS + JavaScript examples. Still, adding support for more providers would be pretty cool.

Let me know with a comment if you tried it or anything, really. Bye!

--

--

--

Web Development, JavaScript, Node.js, Open Source

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

C static libraries

Setting up my mac for hobby projects

Kubernetes Security

Troubleshooting in the Shell

Fees manager

Minimalistic Software Approach

Agile Planning, Estimation and Tracking

Developer Relations @ Zeta: Role of Developer Advocates — (Part-2)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Manuel Dell'Elce

Manuel Dell'Elce

Web Development, JavaScript, Node.js, Open Source

More from Medium

How To Write Your First Great Article In Less Than 60 Minutes And Start To Build Your Portfolio?

5 Practical Tips to Help You Become a More Productive Writer

3 Easy Ways to Know If Today is a Good Day to Write

They’ll Follow You if You Feed Them