How to pass in Markdown file as argument?

[hbhutta]

Hello, I am following this link to understand how to use this library. In this code:

import React from 'react'
import ReactDOM from 'react-dom'
import Markdown from 'react-markdown'
import rehypeHighlight from 'rehype-highlight'

const markdown = `
# Your markdown here
`

ReactDOM.render(
  <Markdown rehypePlugins={[rehypeHighlight]}>{markdown}</Markdown>,
  document.querySelector('#content')
)

Instead of the string representing the markdown, is there a way I can pass a markdown file I have somewhere else (not necessarily in the same directory) instead? This would be very useful. Thanks!

[wooorm]

How to do files is unrelated to this project and relates to what other tools you have. You can use fs to read files in Node. fetch to get files in browsers.

[remcohaszing]

What do you mean by plain React? Where does the markdown come from? From an API?

Do you use Webpack? Vite? Next.js? Remix? Do the files live on your file system? In that case you may be better off using MDX.

[hbhutta]

I used the create-react-app utility and I have a markdown file in my ../public directory which I wrote myself (it's a blog post I intend to have on my website). I am not familiar with the technologies you have mentioned, but what I want is, say, for the following markdown:

Heading

Bold bold text

Italic italicized text

blockquote

Ordered List

1. First item
2. Second item
3. Third item

Unordered List

• First item
• Second item
• Third item

console.log("Hello, world!");

Code code

---

Link link

To be rendered exactly as it would be if I were to preview it in any reliable markdown editor (e.g. in VSCode):

I see on the remark website that the markdown written is being rendered properly, with the code blocks, headers, images, etc.. However, for me this is not working:

Is there some possibility that some CSS file I have could be preventing the markdown from properly rendering?

Additionally, I noticed that when I installed react-markdown, I got some high vulnerability alerts (Could this be affecting the rendering?):

Here's my code:

import { useEffect, useState } from "react";
import Markdown from "react-markdown";

export default function App() {
  return (
    <div className="App">
      <PageComponent />
    </div>
  );
}

const PageComponent = () => {
  const [content, setContent] = useState("");

  useEffect(() => {
    fetch("Page.md")
      .then((res) => res.text())
      .then((text) => setContent(text));
  }, []);

  return (
    <div className="post">
      <Markdown children={content} />
    </div>
  );
};

The markdown I displayed earlier is what I'm trying to render. It's located in my ../public. I'm very confused why this isn't working, any pointers would be appreciated.

[ChristianMurphy]

create-react-app

Create react app is deprecated reactjs/react.dev#5487 (comment), consider moving to a build tool which still has support like https://vitejs.dev/, https://remix.run/, or https://nextjs.org/ (among others)

Is there some possibility that some CSS file I have could be preventing the markdown from properly rendering?

Yes, notably tailwind is know to break markdown rendering.

Additionally, I noticed that when I installed react-markdown, I got some high vulnerability alerts (Could this be affecting the rendering?):

The vulnerabilities are in react-scripts (CRA) and aren't a concern https://overreacted.io/npm-audit-broken-by-design/

[remcohaszing]

Adding onto @ChristianMurphy’s answer, I recommend using Vite and MDX. It’s the closest to what you have currently.

The only configuration you need is:

// vite.config.js
import { defineConfig } from 'vite'
import mdx from '@mdx-js/rollup'

export default defineConfig({
  plugins: [
    mdx()
  ]
})

That should allow you to import and render your markdown file like this.

import React from "react";
import BlogPost from "../path/to/post.md";

export default function Blogs() {
  return (
    <BlogPost />
  )
}

[hbhutta]

Thank you, I had no idea create-react-app is deprecated. But why is it still on the website here then?

[ChristianMurphy]

The React docs point to other frameworks https://react.dev/learn/start-a-new-react-project
The link you shared are the Create React App docs, it is on that site because it is its own doc site 😉