How to implement a Markdown editor in React?

ChatGPT - "what is markdown"

When developing a text editor in React, you may have a various choice, such as React Quill, Editor.js, TinyMCE...

They are great libraries!

But in some cases, you may not need that much, and you don't need to customize or put much effort on an editor. In this case, we might consider a Markdown one.

It's simple.

Markdown is a simple, readable, and versatile markup language that allows for easy formatting of plain text, making it ideal for writing and converting content across various platforms.

Implement the editor based on your interest, such as an area input, style it nicely!

Then install a package to decode/parse the Markdown syntax, I prefer marked

To display the markdown string, do it like so:

Looks familiar? This is a Markdown editor in Thucde.dev comment part!

In this example, the comment section doesn't require too many functionalities, so a markdown editor would be enough!

That's it.

Thanks for reading. hope this helps!

And don't forget to have a great weekend. It's FRIYAY!! 📽️🎡🛝🌴✈️