Markdown is a lightweight markup language used to format plain text. It was created by John Gruber in 2004 with the goal of making it easy for writers to create web content that is both human-readable in its raw form and easily converted into HTML.
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
npm i marked
Install the "marked" library
To display the markdown string, do it like so:
[...] DOMPurify.sanitize(marked.parse((value)) [...]
Parse the Markdown string to display it on your page
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!! 📽️🎡🛝🌴✈️
