Rendering markdown in react

Questions and Answers
1
System Information
  • v3:

Hey folks, does anyone have a react module that will render markdown with the same behaviour as the inbuilt preview. AFAICS strapi using markdown_it internally, but I haven’t seen any equivalent in the react ecosysytem.

React Markdown doesn’t work exactly the same - specifically footnotes aren’t rendering for me.

1 Like
2

Hi bro, did you found any solution for this issue?

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