搞了好久都没搞起来,不是渲染本地 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} />
);
}
想要的效果
实际渲染
1
scienhub 6 天前 via iPhone
看下 mdx( https://nextjs.org/docs/pages/building-your-application/configuring/mdx)
主要就是配合 rehype 和 remark 插件实现 md 渲染。 有个 remark-gfm 可以实现 GitHub flavored markdown 样式。 |
2
wunonglin 6 天前
最小代码建议给一个在线跑起来的。
目测是你的 md 没样式 |
3
Track13 6 天前 via Android
样式要自己加😓
|
5
jlak OP @wunonglin md 什么样式?
https://dillinger.io 我是这里复制过来的,也复制了其他的和 ai 写的,都一样 我 api 写入数据库 再读区数据库的 @Track13 连空行都消失了 这也是样式关系吗 |
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> ); } ``` |
7
jlak OP 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> ); } |
8
jlak OP |
9
jlak OP 找到元凶了,是 TailwindCSS 去掉了所有样式,删除 TailwindCSS 后正常了,但又不能不用 TailwindCSS
|