judge4c/src/components/content/mdx-renderer.tsx

import "@/styles/mdx.css";
import {
  DefaultDarkThemeConfig,
  DefaultLightThemeConfig,
} from "@/config/monaco-theme";
import { cn } from "@/lib/utils";
import "katex/dist/katex.min.css";
import remarkGfm from "remark-gfm";
import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";
import { MDXRemote } from "next-mdx-remote/rsc";
import rehypePrettyCode from "rehype-pretty-code";
import { MdxComponents } from "@/components/content/mdx-components";

interface MdxRendererProps {
  source: string;
  className?: string;
}

const MdxRenderer = ({ source, className }: MdxRendererProps) => {
  return (
    <article className={cn("markdown-body", className)}>
      <MDXRemote
        source={source}
        options={{
          mdxOptions: {
            rehypePlugins: [
              rehypeKatex,
              [
                rehypePrettyCode,
                {
                  theme: {
                    light: DefaultLightThemeConfig.id,
                    dark: DefaultDarkThemeConfig.id,
                  },
                  keepBackground: false,
                },
              ],
            ],
            remarkPlugins: [remarkGfm, remarkMath],
          },
        }}
        components={MdxComponents}
      />
    </article>
  );
};

export { MdxRenderer };