Convert Markdown to HTML with remark-html

John Otander
InstructorJohn Otander
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 4 years ago

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.

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.

egghead
egghead

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today