If you have a blog or website with articles or long text documents, markdown is your friend. It makes authoring documents so much easier and more intuitive than straight HTML. Markdown has a far smaller learning curve than HTML and can easily be taught to non-tech-savvy writers. Markdown editors are also built-in to headless CMSs like Contentful.

In this tutorial I will show you how to take a markdown document, convert it to HTML and then style it using React JS, React-Markdown and SASS.

We will need the following packages for this tutorial:

So let’s begin by installing our dependencies:

npm i react-markdown react-syntax-highlighter rehype-raw remark-gfm sass

Next, let’s create our markdown rendering component:

MdPage.js

Now let’s create our SASS styles:

mdCss.scss

That’s it! It’s that simple. You can override any of the HTML elements converted by react-markdown to apply any CSS styles you wish.

I hope you enjoyed this article. For more great information, please visit our Blog.