Can't display markdown on NEXTJS

Question

Haloo, hope you have a great day!

I'm in the middle of learning something about markdown on react, i already success using react markdown editor, but now, when i want to display it, i got stuck, i'm using react-markdown and NEXTJS, and here's the problem:

importing the library:

const ReactMarkdown = dynamic(
  () => import("react-markdown").then((mod) => mod.default),
  { ssr: false }
);
const rehypeRaw = dynamic(
  () => import("rehype-raw").then((mod) => mod.default),
  { ssr: false }
);
const remarkGfm = dynamic(
  () => import("remark-gfm").then((mod) => mod.default),
  { ssr: false }
);

i have markdown look like this:

const [value, setValue] = useState("# A demo of `react-markdown`");

and this is my div

<div className="container mx-auto px-0 lg:px-40 pt-6 pb-8 sm:pt-14 sm:pb-16 md:pt-14 md:pb-16 min-h-screen">
        <ReactMarkdown
          children={value}
          remarkPlugins={[remarkGfm]}
        />
</div>

and when i refresh my page, i got this:

that's not H1, and the code tag seems didn't work, BUT when i'm using bold:

const [value, setValue] = useState("# A **demo** of `react-markdown`");

the bold is being display..

and at this point, idk why this happend, can somebody help me?

Answer 1

It looks like you're using TailwindCSS, the default styles for elements are reset, that's why the h1 text will look like any other text.

You can use @tailwindcss/typography to counter this.

Just add the plugin to your tailwindcss.config.js file

// tailwindcss.config.js
module.exports = {
  plugins: [require('@tailwindcss/typography'), (...)],
  ...
}

And use the prose classes on the HTML elements

<div className="prose ...">(...)</div>

Also, using Next.js dynamic imports, you don't have to use the then syntax to get the default module.

const ReactMarkdown = dynamic(() => import("react-markdown"), { ssr: false });

This snippet should give you the same as importing the default module. Only use the then when you want to import a particular export