请问 next.js 里如何好好渲染 md

搞了好久都没搞起来，不是渲染本地 md 文件，而是从 cms 抓取 markdown 的 content 然后丢给 next-mdx-remote/rsc 渲染，需要服务器端渲染

但是搞了很久渲染的和想要的效果差很远

还不区分换行和空行，所有空行都没了

最小代码

import { MDXRemote } from "next-mdx-remote/rsc";

export default async function Render({ md }) {
  return (
    <MDXRemote source={md} />
  );
}

想要的效果

实际渲染

scienhub

58 天前

看下 mdx( https://nextjs.org/docs/pages/building-your-application/configuring/mdx)

主要就是配合 rehype 和 remark 插件实现 md 渲染。

有个 remark-gfm 可以实现 GitHub flavored markdown 样式。

wunonglin

58 天前

最小代码建议给一个在线跑起来的。

目测是你的 md 没样式

Track13

58 天前

样式要自己加😓

jlak

58 天前

@scienhub
我用的 next-mdx-remote/rsc 官网的文档不一样
remark-gfm 加入区别不大，很细的变化

jlak

58 天前

@wunonglin md 什么样式？
https://dillinger.io 我是这里复制过来的，也复制了其他的和 ai 写的，都一样
我 api 写入数据库再读区数据库的

@Track13 连空行都消失了这也是样式关系吗

jlak

58 天前

新弄了一套还是丑空行都消失了
```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>
);
}
```

jlak

58 天前

Reply 6
jlak
OP
刚刚
新弄了一套还是丑空行都消失了
```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>
);
}