ChatAI/app/components/markdown.tsx

import ReactMarkdown from "react-markdown";
import "katex/dist/katex.min.css";
import RemarkMath from "remark-math";
import RehypeKatex from "rehype-katex";
import RemarkGfm from "remark-gfm";
import RehypePrsim from "rehype-prism-plus";

export function Markdown(props: { content: string }) {
  return (
    <ReactMarkdown
      remarkPlugins={[RemarkMath, RemarkGfm]}
      rehypePlugins={[
        RehypeKatex,
        [RehypePrsim, { ignoreMissing: true }],
      ]}
    >
      {props.content}
    </ReactMarkdown>
  );
}