Rendering markdown in Remix – DEV Community

One other cool out-of-the-box characteristic of Remix is that it helps markdown.

Each plain markdown and MDX format.

This text will present you the way straightforward it’s to get began with markdown in your remix challenge.



Utilizing plain markdown information in Remix

Let’s create a brand new listing for our challenge to get began with plain markdown information in Remix.
We’ll name this folder weblog. (Since we wish to hold our posts for now)

Inside this folder, create a my-first-article.md file and place the next contents within it.

---
meta:
  title: "My first article"
  description: "Absolutely powered by Markdown"
---

# Hiya World!

I am superb markdown content material

## How cool!
Enter fullscreen mode

Exit fullscreen mode

Now merely run your web site and go to the /weblog/my-first-article endpoint!

You may be welcomed by the markdown absolutely rendered!

You would possibly surprise why all of it appears the identical?
Our supply code has all of the heading components, however since we added zero styling, we see every thing with out it.

I will inform you extra about including the typography plugin in a follow-up article.



Rendering MDX in Remix

In addition to plain markdown we will additionally go for MDX, like tremendous cool, barely extra dynamic model of markdown.

Begin by creating an mdx-sample.mdx file within the weblog listing.

---
componentData:
  title: Chris
---

import Identify from "~/parts/title";

# Hiya MDX!

<Identify {...attributes.componentData} />
Enter fullscreen mode

Exit fullscreen mode

As you’ll be able to see, we set some element information on the high part after which import a element.

This element then renders this element information.

Let’s rapidly arrange this tremendous fundamental element.
Create a parts listing inside your app folder.

Create the title.tsx file and paste the next element into it.

const Identify = ({ title }: { title: string }) => <div>Hiya {title}</div>;
export default Identify;
Enter fullscreen mode

Exit fullscreen mode

A brilliant easy element that renders a div that states hey {title}.

The title might be obtained from the markdown file.

Let us take a look at the way it appears after we open this file.

MDX in Remix

You may also discover the whole code samples on GitHub.



Thanks for studying, and let’s join!

Thanks for studying my weblog. Be at liberty to subscribe to my e mail e-newsletter and join on Facebook or Twitter



Add a Comment

Your email address will not be published. Required fields are marked *