From f1b6e86123581f89985908f8a899352899ce5e10 Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Fri, 7 Mar 2025 11:37:24 +0800
Subject: [PATCH] feat(components): add MdxRenderer for rendering MDX content
 with custom styling and syntax highlighting

---
 src/components/content/mdx-renderer.tsx | 54 +++++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 src/components/content/mdx-renderer.tsx

diff --git a/src/components/content/mdx-renderer.tsx b/src/components/content/mdx-renderer.tsx
new file mode 100644
index 0000000..2b8d73e
--- /dev/null
+++ b/src/components/content/mdx-renderer.tsx
@@ -0,0 +1,54 @@
+import "@/style/mdx.css";
+import { cn } from "@/lib/utils";
+import { Suspense } from "react";
+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 { Skeleton } from "@/components/ui/skeleton";
+import { MdxComponents } from "@/components/content/mdx-components";
+import { DefaultDarkThemeConfig, DefaultLightThemeConfig } from "@/config/monaco-theme";
+
+interface MdxRendererProps {
+  source: string;
+  className?: string;
+}
+
+export function MdxRenderer({ source, className }: MdxRendererProps) {
+  return (
+    <Suspense
+      fallback={
+        <div className="h-full w-full p-4">
+          <Skeleton className="h-full w-full rounded-3xl" />
+        </div>
+      }
+    >
+      <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>
+    </Suspense>
+  );
+}