Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Render Markdown using React with React-Remarkable

    Akash GuthaAkash Gutha

    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'

    reactReact
    Code

    Code

    Become a Member to view code

    You must be a 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
    Transcript

    Transcript

    00:01 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.

    00:23 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.

    00:45 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.

    01:08 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.

    Discuss

    Discuss