refactor(mdx-render): simplify theme configuration and change export style

- Remove custom Monaco theme imports
- Use github default themes for rehypePrettyCode
- Change component export from default to named export
This commit is contained in:
cfngc4594 2025-05-13 16:27:46 +08:00
parent ba1937ecbb
commit 5aec2ec323

View File

@ -1,8 +1,4 @@
import "@/styles/mdx.css"; import "@/styles/mdx.css";
import {
DefaultDarkThemeConfig,
DefaultLightThemeConfig,
} from "@/config/monaco-theme";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import "katex/dist/katex.min.css"; import "katex/dist/katex.min.css";
import remarkGfm from "remark-gfm"; import remarkGfm from "remark-gfm";
@ -17,7 +13,7 @@ interface MdxRendererProps {
className?: string; className?: string;
} }
const MdxRenderer = ({ source, className }: MdxRendererProps) => { export const MdxRenderer = ({ source, className }: MdxRendererProps) => {
return ( return (
<article className={cn("markdown-body", className)}> <article className={cn("markdown-body", className)}>
<MDXRemote <MDXRemote
@ -30,8 +26,8 @@ const MdxRenderer = ({ source, className }: MdxRendererProps) => {
rehypePrettyCode, rehypePrettyCode,
{ {
theme: { theme: {
light: DefaultLightThemeConfig.id, light: "github-light-default",
dark: DefaultDarkThemeConfig.id, dark: "github-dark-default",
}, },
keepBackground: false, keepBackground: false,
}, },
@ -45,5 +41,3 @@ const MdxRenderer = ({ source, className }: MdxRendererProps) => {
</article> </article>
); );
}; };
export { MdxRenderer };