新弄了一套 还是丑 空行都消失了
```Javascript
import { MDXRemote } from "next-mdx-remote/rsc";
import matter from "gray-matter";
import remarkGfm from "remark-gfm";
export default async function Test3() {
const data = await fetch(
"https://raw.githubusercontent.com/onwidget/astrowind/refs/heads/main/src/data/post/landing.md"
);
const text = await data.text();
const { content } = matter(text);

const mdxOptiOns= {
mdxOptions: {
remarkPlugins: [remarkGfm],
},
};

const compOnents= {
h1: ({ children }: { children: React.ReactNode }) => (
<h1 className="text-3xl font-bold text-red-500">{children}</h1>
),
p: ({ children }: { children: React.ReactNode }) => (
<p className="text-lg text-gray-700">{children}</p>
),
a: ({ children, href }: { children: React.ReactNode; href: string }) => (
<a href={href} className="text-blue-500 hover:underline">
{children}
</a>
)
ul: ({ children }: { children: React.ReactNode }) => (
<ul className="list-disc list-inside text-gray-700">{children}</ul>
),
li: ({ children }: { children: React.ReactNode }) => (
<li className="text-gray-700">{children}</li>
),
code: ({ children }: { children: React.ReactNode }) => (
<code className="text-gray-700">{children}</code>
),
blockquote: ({ children }: { children: React.ReactNode }) => (
<blockquote className="text-gray-700">{children}</blockquote>
),
table: ({ children }: { children: React.ReactNode }) => (
<table className="text-gray-700">{children}</table>
),
tr: ({ children }: { children: React.ReactNode }) => (
<tr className="text-gray-700">{children}</tr>
),
td: ({ children }: { children: React.ReactNode }) => (
<td className="text-gray-700">{children}</td>
),
};

return (
<div className="container mx-auto p-4">
<MDXRemote
source={content}
optiOns={mdxOptions}
compOnents={components}
/>
</div>
);
}
```