Kalan's Blog

Software Engineer / Taiwanese / Life in Fukuoka

Current Theme light

category: Chat tag: typora

Typora - A handy markdown editor

Typora is a markdown editor that I love using. Up until now, I haven't found any editor that is more convenient than Typora. It has many useful features, including:

  • Support for tables
  • Support for LaTeX syntax, making it easy to write equations
  • Ability to directly drag and drop images to generate corresponding markdown syntax
  • Support for various HTML tags, such as iframe, video, ruby, etc.
  • Customizable themes (using CSS)
  • Built-in file and folder browsing and switching functionality
  • And many other useful features

These well-designed features make me love Typora even more. However, there is one annoyance when using it, which is uploading images. Typora only includes the path of the image in the markdown, like the following syntax:

![image alt](/Users/Kalan/my/image/path.png)

If you simply copy and paste this syntax, the image will not be displayed on the web page because users cannot access the path on your computer. You must upload the image to cloud storage or a server. It is quite troublesome to handle this manually, especially when the image is large. The thought of having to compress it before uploading adds an extra step, which interrupts the flow of writing.

I couldn't help but wonder if there is a way to upload images directly without leaving the editor. Typora itself supports powerful image dragging behavior, and it also works perfectly to copy and paste images from web pages. It is already a great user interface.

Finally, I came across this:

Typora Image Upload

I was amazed! This feature allows you to trigger actions when inserting images into the editor, such as moving them to a specific folder or uploading them. What's even better is that you can define your own command to upload images!

Typora Customized Image Upload Interface

In this upload command, I compressed the image, uploaded it to S3, and returned the image URL. The rest of the UI and interactive status are handled by Typora. This way, uploading images becomes completely painless!

The result looks like this:

Implementation

You can directly refer to the code on Github (written in Node.js). It's quite simple to implement, but I installed some packages to finish it quickly. If you prefer to start from scratch, you can try writing it yourself. Currently, it only supports uploading to S3.

Afterword

From now on, a new window has opened in my life. I will no longer procrastinate writing posts because of the hassle of dealing with photos. I share this with everyone who loves using markdown to create content.

Prev

eRemote IR Remote Control with Google Home for Smart Home

Next

What's new about working remotely for 4 months in Fukuoka

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.