Kalan's Blog

Software Engineer / Taiwanese / Life in Fukuoka

Current Theme light

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.

Prev

React16 Highlights

Next

Carnival Double 11 — Happy Birthday to Me

If you found this article helpful, please consider buy me a drink ☕️ It'll make my ordinary day shine✨

Buy me a coffee

作者

Kalan 頭像照片,在淡水拍攝,淺藍背景

愷開 | Kalan

Hi, I'm Kai. I'm Taiwanese and moved to Japan in 2019 for work. Currently settled in Fukuoka. In addition to being familiar with frontend development, I also have experience in IoT, app development, backend, and electronics. Recently, I started playing electric guitar! Feel free to contact me via email for consultations or collaborations or music! I hope to connect with more people through this blog.