NextJS/React 中渲染 markdown 的问题

Question

我再次尝试在 NextJS/React 中渲染 markdown。由于某种原因，我的代码不起作用，如下：

import ReactMarkdown from "react-markdown";
import gfm from 'remark-gfm';
const PostContent = () => {
    const source = `
        # Hello, world!
        ---
        ~this doesn't work.~
    `
    return (
        <ReactMarkdown remarkPlugins={[gfm]} children={source} />
    );
};

export default PostContent;

它不会渲染 markdown，而是正常输出文本，就好像它是 JSON 一样：

谁能告诉我为什么会发生这种情况以及如何解决它？谢谢！

我无法提供更多详细信息，因为这就是所有代码。

Answer 1

您需要删除第一个空行以及每行开头的所有空格。这可能看起来很奇怪 - 但这正是ReactMarkdown您期望做的。

您的组件最终将如下所示：注意反引号文本内的“奇怪”间距。

import ReactMarkdown from "react-markdown";
import gfm from 'remark-gfm';

const PostContent = () => {

    const source = `
# Hello, world!
---
~this doesn't work.~
`
    return (
        <ReactMarkdown remarkPlugins={[gfm]} children={source} />
    );
};

export default PostContent;