DEV Community

Cover image for building a basic markdown editor: unified, trees and data
Matteo
Matteo

Posted on • Edited on • Originally published at matteogassend.com

building a basic markdown editor: unified, trees and data

As you have probably guessed from the previous articles in this series (go read them if you haven't, btw), the main thing when building a markdown publishing webapp, is the markdown editor itself.

Season 3 Walk GIF by The Simpsons

But not all editors are born equal; there are many ways of building one, with benefits and tradeoffs. In this article I'll try to explain what led me to my current solution (not yet completed, but still I'd say it's about 80% done).

Markdown

if you don't know what markdown is, think of it as kind of like html; it is a type of text with special characters or combination of characters that get interpreted and displayed according to a determined specification; for instance, an html <h2> tag would be translated in markdown with ## and vice versa. It is especially useful if you want to quickly write a README, some documentation or, turns out, articles for certain platforms. You can find a more complete introduction that I can provide here

What I needed to build

I needed to build a markdown editor with a live preview. The first part is not that difficult; put down a textarea on a page and you have your editor! The problem was with the live preview; turns out Markdown is not natively supported by browsers...

Excuse Me Wow GIF by Mashable

But you know what is? HTML! So I just needed to build (or find, in this case) a tool that allowed me to convert Markdown to HTML!

Tyler Perry Problem Solved GIF by Nickelodeon

Unified

To build the Markdown editor (and the preview, mostly), I decided to use unified, an ecosystem of tools allowing the developer to parse a format into an abstract tree and back into another format (for example, markdown to html) and modify said tree (for example, to add specific classes to certain html elements before they are converted to an actual html string. The basics of how to do so can be found in this article, but they mostly consist of:

  • reading the markdown content (from the textarea in this case)
  • using remarkParse to convert the markdown into a syntax tree
  • using remarkRehype to convert the markdown syntax tree to an html syntax tree
  • using rehypeStringify to convert the html syntax tree to an html string

GIF by South Park

The real magic is what happens once you generate the syntax trees; at that point, you can modify them with the existing plugins (or make you own, if you really want to). For instance, I use a plugin to add specific css classes to certain elements so they integrate better with the visual design of the website another to add code highlighting with highlight.js and some others for generating a js object from the frontmatter of a Markdown file and to add support for Github flavored Markdown. I could do a lot more with these, like add support for videos, embeds and more, but for now this is enough for a simple preview.

NB: remark and rehype are also used by astro to render the collection's markdown content, so any plugins you use there can also be used here

Putting it all together

Now that we have a basic understanding of how unified works, let's practice! I have already created a stackblitz example you can see just below this paragraph: try writing something in the textarea and it should be parsed and displayed in the preview next to it!

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay