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

This topic created in 494 days ago, the information mentioned may be changed or developed.

搞了好久都没搞起来，不是渲染本地 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} /> ); }

想要的效果

实际渲染

Supplement 1 Jan 11, 2025

找到元凶了，是 TailwindCSS 去掉了所有样式

Supplement 2 Jan 11, 2025

成功解决！方案是安装 @tailwindcss/typography 插件然后添加 prose 到 className

渲染

mdx

CMS

11 replies 2025-01-11 09:52:33 +08:00

scienhub

Jan 11, 2025 via iPhone

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

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

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

shakaraka

PRO

Jan 11, 2025

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

目测是你的 md 没样式

bgm004

Jan 11, 2025 via Android

样式要自己加

jlak

Jan 11, 2025

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

jlak

Jan 11, 2025

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

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

jlak

Jan 11, 2025

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

Jan 11, 2025

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>
);
}

jlak

Jan 11, 2025

我在沙盒里写了一份 https://stackblitz.com/edit/nextjs-njhg2amd?file=app%2Fpage.tsx

jlak

Jan 11, 2025

找到元凶了，是 TailwindCSS 去掉了所有样式，删除 TailwindCSS 后正常了，但又不能不用 TailwindCSS

scienhub

Jan 11, 2025

@jlak 如果是 tailwindcss 冲突了的话，可以在 tailwindcss.config.js 里面设置一下。

jlak

Jan 11, 2025 via iPhone

@scienhub tw 会删除所有默认样式，用 @ tailwindcss/typography 插件后好多了