V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
jlak
V2EX  ›  问与答

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

  •  
  •   jlak · 6 天前 · 763 次点击

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

    想要的效果 514e7cd8b2562d3c5f7ccfa08f9bb891.png

    实际渲染 6608d1c5e0e5915ef24b5f467071916a.png

    第 1 条附言  ·  6 天前
    找到元凶了,是 TailwindCSS 去掉了所有样式
    第 2 条附言  ·  6 天前
    成功解决!方案是安装 @tailwindcss/typography 插件 然后添加 prose 到 className
    11 条回复    2025-01-11 09:52:33 +08:00
    scienhub
        1
    scienhub  
       6 天前 via iPhone
    看下 mdx( https://nextjs.org/docs/pages/building-your-application/configuring/mdx)

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

    有个 remark-gfm 可以实现 GitHub flavored markdown 样式。
    wunonglin
        2
    wunonglin  
       6 天前
    最小代码建议给一个在线跑起来的。

    目测是你的 md 没样式
    Track13
        3
    Track13  
       6 天前 via Android
    样式要自己加😓
    jlak
        4
    jlak  
    OP
       6 天前
    @scienhub
    我用的 next-mdx-remote/rsc 官网的文档不一样
    remark-gfm 加入区别不大,很细的变化
    jlak
        5
    jlak  
    OP
       6 天前
    @wunonglin md 什么样式?
    https://dillinger.io 我是这里复制过来的,也复制了其他的和 ai 写的,都一样
    我 api 写入数据库 再读区数据库的

    @Track13 连空行都消失了 这也是样式关系吗
    jlak
        6
    jlak  
    OP
       6 天前
    新弄了一套 还是丑 空行都消失了
    ```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
        7
    jlak  
    OP
       6 天前
    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
        8
    jlak  
    OP
       6 天前
    jlak
        9
    jlak  
    OP
       6 天前
    找到元凶了,是 TailwindCSS 去掉了所有样式,删除 TailwindCSS 后正常了,但又不能不用 TailwindCSS
    scienhub
        10
    scienhub  
       6 天前
    @jlak 如果是 tailwindcss 冲突了的话,可以在 tailwindcss.config.js 里面设置一下。
    jlak
        11
    jlak  
    OP
       6 天前 via iPhone
    @scienhub tw 会删除所有默认样式,用 @ tailwindcss/typography 插件后好多了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2795 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 14:45 · PVG 22:45 · LAX 06:45 · JFK 09:45
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.