Medium itself does not support editing code blocks, although the reason behind this is unknown (perhaps engineers are not the main target audience). So, if you want to highlight code, one approach is to directly paste images, and another is to paste it on gist and then embed it in the article.
Although pasting code as images can achieve the highlighting effect, it is not friendly for engineers because they cannot copy and paste the code for testing or editing the article without manually editing the image, which is quite troublesome.
However, pasting on gist also has several issues:
- It cannot be viewed on mobile devices and will only provide a link instead of the embedded content.
- It is cumbersome to paste code to gist. (However, it is a good approach to upload to gist using extensions like Visual Studio Code or Sublime.)
In order to have highlighted code blocks on Medium, I finally decided to use AWS Lambda to solve this problem.
AWS Lambda
For readers who are not familiar with Lambda, there are already many resources available on the internet, so I won't go into detail here. Lambda allows AWS to execute the desired functions for you without actually creating a server (of course, there is still a server behind the scenes). Through this approach, we don't need to write a function and deploy it to a machine or even maintain it. We just need to execute it.
Github Issue
To integrate with the Lambda endpoint, I decided to use a github webhook for triggering. Because on github, we can use issues to write markdown, upload images (hosted by github), preview, code blocks, and more, which is quite convenient. When we want to publish an article, we can trigger the webhook by closing the issue, and then use Lambda to upload the code block to gist, and finally call the Medium API to create the article.
Medium API
Medium's API is small and lightweight, but convenient and easy to use. First, go to the setting > Integration tokens on your personal page to generate a token, and then use the token to call the API for creating articles.
Gist API
The gist API is similar. To keep your own gists organized, it is recommended to open another account specifically for storing code used in articles. Go to settings > developer settings > personal access token > generate token to create a token, and remember to select the gist permission.
Integrating with Lambda
After completing the preliminary work, you can start integrating with Lambda.
First, put the created Lambda endpoint into the github webhook, and then find a package that can compile markdown to HTML (I used marked), and combine them together!
A simple implementation can be found here. Although it may seem a bit troublesome, it is actually quite convenient. I wonder when Medium will support code blocks QQ.