Massbug/judge4c
2
0
Fork 0
mirror of https://github.com/massbug/judge4c.git synced 2025-05-18 07:16:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(problem-description): Use compileMDX with remarkGfm for MDX rendering

Browse Source
This commit is contained in:
cfngc4594 2025-02-20 18:46:20 +08:00
parent 8498f57fbc
commit 3f3b153c4b
1 changed files with 27 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/problem-description.tsx
View File

@ -1,5 +1,6 @@
import { Suspense } from "react";
import { MDXRemote } from "next-mdx-remote/rsc";
import remarkGfm from "remark-gfm";
import { compileMDX } from "next-mdx-remote/rsc";
import { Skeleton } from "@/components/ui/skeleton";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
@ -7,15 +8,29 @@ interface ProblemDescriptionProps {
mdxSource: string;
}
export function ProblemDescription({ mdxSource }: ProblemDescriptionProps) {
return (
<ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-56px)]">
<Suspense fallback={<Skeleton className="h-full w-full" />}>
<div className="markdown-body">
<MDXRemote source={mdxSource} />
</div>
</Suspense>
<ScrollBar orientation="horizontal" />
</ScrollArea>
);
export async function ProblemDescription({ mdxSource }: ProblemDescriptionProps) {
try {
const { content } = await compileMDX({
source: mdxSource,
options: {
mdxOptions: {
remarkPlugins: [remarkGfm],
},
},
});
return (
<ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-56px)]">
<Suspense fallback={<Skeleton className="h-full w-full" />}>
<div className="markdown-body">
{content}
</div>
</Suspense>
<ScrollBar orientation="horizontal" />
</ScrollArea>
);
} catch (error) {
console.error("Error compiling MDX:", error);
return <Skeleton className="h-full w-full" />;
}
}