How to add code highlighting in Medium articles without leaving the editor
A browser extension for Chrome and Firefox. Lets you create and edit GitHub Gists straight from Medium
UPDATE 28 November 2022:
Good news! Medium now has syntax highlighting by default, no extensions needed. Read the blog post from the Medium product team: https://blog.medium.com/code-blocks-with-syntax-highlighting-53343df53c4f
However there are still some limitations with respect to the “gist” way, which they might improve in the future:
- No line numbers.
- Fewer languages supported. e.g. no Dart.
Thus continue if you still would like to try the alternative “gist” way.
The current (now old) 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.
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 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!
