Introduction to the remark CLI

Add a Dynamic Table of Contents to Your Markdown Documents with remark-toc

Convert Markdown to HTML with remark-html

Create a remark Plugin to Modify Markdown Headings

Remove Markdown Nodes from a Document with unist-util-remove

Store Heading Metadata in a Markdown Document with remark

unified - the compiler for your content

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](https://github.com/remarkjs/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.

Course

unified - the compiler for your content

Convert Markdown to HTML with remark-html

Share this video with your friends