Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Render Markdown using React with React-Remarkable


    We will use the React-Remarkable library to render markdown onto our React DOM. This library uses the Remarkable library to render markdown.

    Installation Guide

    npm install --save react-remarkable

    Importing Guide

    import Markdown from 'react-remarkable'



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    I have a basic React project set up now. First, we'll go ahead and install the React-Remarkable library. The React-Remarkable library gives you a Markdown component that renders Markdown onto your HTML. Once you have it installed, we can go ahead and import it.

    We'll import Markdown from our React-Remarkable library. Once we have the Markdown imported, we can go ahead and clear the boilerplate code, and add our Markdown component. It takes in a parameter of source, which will be rendered onto our HTML.

    We just pass in the ID. We can call this, this is a heading. If you refresh the browser, you can see that the Markdown has been rendered as expected. Now, we'll add another Markdown component, and we'll pass in the Markdown this time as a child element.

    Let's write in text in bold. Let's go and refresh our browser. You can see there is an error. It says that adjacent JSX element must be wrapped in an enclosing tag. Let's go ahead, take our elements, and enclose it in a div tag. As you can see, the text is rendered in bold.