Build a Markdown Previewer

2 min readJul 30, 2018

Use React, marked.js and highlight.js to build a markdown previewer

This tutorial is based around the Free Code Camp front end challenge of building a Markdown Previewer. In my video I keep things simple. I build the app with a focus on passing the required tests to complete the assignment. This tutorial is great for React beginners or anyone interested in a quick lesson on using a Markdown parser with React.

My goal here is to explain how Markdown works in basic terms. I also show how to wire up custom code highlighting with highlight.js and also how to use the renderer in marked to customize the html output from your Markdown.

So what is Markdown?

In short Markdown is a very simple markup language. By learning the learning the Markdown syntax you can turn plain text into HTML. For example creating a header with a short list is pretty easy in HTML.

<h1>My Header</h1>
<ul>
  <li>List Item One</li>
  <li>List Item Two</li>
  <li>List Item Three</li>
</ul>

It is even easier with Markdown.

# My Header- List Item One
- List Item Two
- List Item Three

Both of the code blocks above produce the same results in HTML. This tutorial will show you how to leverage some Javascript libraries to take advantage of Markdown. Sites like Github use Markdown to let users create their README files and for other text. You can create a pretty cool blog that is super easy to maintain ala Jekyll, using Markdown.

Checkout the sample blog I am working on using another Markdown parser called remarkable here: Link to Mark My Words

I hope you enjoy the video.

Build a Markdown Previewer

Written by Benjamin Brooke