Use Nextra MDX parser in Component

[LuciferUchiha]

I have the following component where the content is a string. The string contain markdown text. How can I use the nextra parser to render this string as markdown?

Similarly to the Callout component.

The component in question:

const MessageCard = ({ role, content }: Message) => {
  return (
    <div
      className={`flex flex-row ${
        role === "assistant" ? "justify-start" : "justify-end"
      }`}
    >
      <div
        className={`p-4 max-w-[80%] rounded-lg ${
          role === "assistant"
            ? "bg-zinc-800 text-zinc-50"
            : "bg-zinc-50 text-zinc-800"
        }`}
      >
        {content}
      </div>
    </div>
  );
}

[dimaMachina]

rename content with children and

<MessageCard>
  # Hello

  - one
  - two

  > blockquote
</MessageCard>

[LuciferUchiha]

Thx @dimaMachina unfortunatly this didn't work. Maybe for more context. MessageCard is never used in a .mdx file only in .tsx file. The "content" is the response from a ChatGPT call. This is what I tried:

type Message = {
  role: Role;
  content: string;
};

const MessageContent = ({ children }) => {
  return (
    <>
    {children}
    </>
  )
}

const MessageCard = ({ role, content }: Message) => {
  return (
    <div
      className={`flex flex-row ${
        role === "assistant" ? "justify-start" : "justify-end"
      }`}
    >
      <div
        className={`p-4 max-w-[80%] rounded-lg ${
          role === "assistant"
            ? "bg-zinc-800 text-zinc-50"
            : "bg-zinc-50 text-zinc-800"
        }`}
      >
        <MessageContent>{content}</MessageContent>
      </div>
    </div>
  );
}

Rather then using https://github.com/remarkjs/react-markdown I just want to use the already existing markdown compiler/parser.

[dimaMachina]

I think this can be fixed with new playground component https://github.com/shuding/nextra/pull/3174