Rendering markdown in react

Questions and Answers
3

I am using an additional extension remark-gfm it should fix thing for you.

import Markdown from "react-markdown";
import remarkGfm from "remark-gfm";

interface RichTextProps {
  data: {
    body: string;
  };
}

export default function RichText({ data }: RichTextProps) {
  // TODO: STYLE THE MARKDOWN
  return (
    <section className="rich-text py-6 dark:bg-black dark:text-gray-50 ">
      <Markdown children={data.body} remarkPlugins={[remarkGfm]} />
    </section>
  );
}

The code snippet is from the Strapi Next JS starter you can find here GitHub - strapi/nextjs-corporate-starter: Strapi Demo application for Corporate Websites using Next.js

Here is the example of a rendered markdown page: Markdown Example Post