1. 10
    Process Markdown on the Server Using a Remix Loader
⚠️ This lesson is retired and might contain outdated information.

Process Markdown on the Server Using a Remix Loader

Kent C. Dodds
InstructorKent C. Dodds
Share this video with your friends

Social Share Links

Send Tweet
Published 2 years ago
Updated 8 months ago

We’d like to use markdown to format our blog posts. Markdown isn’t getting rendered by default but we can install the marked library to take care of that for us.

The awesome thing about remix is that we can use marked to compile are markdown server-side in a loader function so we don’t have to bundle this hefty library and process markdown in our user’s browsers.

Kent C. Dodds: [0:00] Now, we also want to put out the contents of our post. We'll put it in a div right here. If we just do post.markdown, that's not going to do it for us. Here, if we go to "Trail Riding on Onewheel," we're not seeing this in the format that we want. This is written in Markdown, but we want to have HTML.

[0:20] We're going to install a library called marked to convert Markdown to HTML. We'll import {marked} from 'marked'. Then, we'll use that to get our html, marked(post.markdown). We'll take care of that null option later. Then, we'll pass along html and come down here, take that HTML.

[0:45] Instead of putting it as a child, we're going to dangerouslySetInnerHTML, because this is HTML, as html. It's safe for us to do this because we're the ones making the html and there are much easier ways for us to hack our own website so we don't need to worry about this.

[1:02] If we save that and run npm run dev again to get our dev server up and running, then we've got things laid out the way that we want to. It is now correctly parsed. The cool thing about this is that we are doing this Markdown parsing on the server. We don't have to send this really big library to our end users and process Markdown in their browser.

[1:24] We can do that all in the loader on our server. All that we send them is the post and the html. Again, we're sending more information than we really need to. What we could do is we could just say, title is post.title, and just take our title and get rid of all of that.

[1:45] We've optimized things further where we're definitely not sending any more than what we absolutely need to. We're also not processing anymore on the user's device than is absolutely necessary, thanks to the fact that our loader runs on the server.

~ just now

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