1×
Become a member
to unlock all features

Level Up!

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

Autoplay

    Convert Markdown to HTML with remark-html

    John OtanderJohn Otander
    javascriptJavaScript

    Most of the time with markdown documents we want to render them to HTML for static websites. You can use remark and the remark-html plugin to transpile your markdown documents to HTML with a build script.

    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
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 0:00 In order to convert Markdown to HTML, we'll need to install remark in the remark HTML plugin. We also need to create our Markdown document and touch the build script which we'll use to run the plugin. We'll also need to add the build script to our package.json.

    0:22 Now we can begin working on our build scripts. First, we'll require the fs module and read in our document with readFileSync. This will read in the Markdown document as a string. We'll also need to require remark and remark HTML.

    0:42 Now we can invoke remark and pass it to remark HTML plugin. Then we can call processSync and pass it our document. The result will contain a contents key that has our raw HTML. However, we'll need to wrap it in an HTML tag. Now that we have a valid HTML string, we'll need to write it to disk so that we can read it with our browser.

    1:04 We can now run yarn start, which runs our build, and open up the index.html file with our browser. We've successfully converted our Markdown to HTML. Let's inspect it. Looks good to me.

    1:22 Altogether, we've used the fs module and then readFileSync to read in our document as a Markdown string. Then we've used remark and the remark HTML plugin to convert a Markdown document to HTML. We wrapped it in an HTML tag using a template string and then wrote it to disk which we opened in our browser as index.html.