如何在react-markdown中添加多换行，解决Strapi markdown内容换行失效问题

原因说明 #

默认react-markdown遵循CommonMark规范，会将单个换行识别为普通空格、连续多个换行仅识别为单个段落分隔，同时默认不处理软换行，因此会出现排版间距丢失的问题。

步骤1：安装并添加remark-breaks插件 #

该插件用于将markdown中的软换行转换为<br>标签，保留换行效果，首先执行安装命令：

npm install remark-breaks
# 或使用yarn
yarn add remark-breaks
# 或使用pnpm
pnpm add remark-breaks

步骤2：修改组件代码，引入插件并添加样式容器 #

修改后的代码如下：

import ReactMarkdown from "react-markdown";
import rehypeRaw from "rehype-raw";
import remarkBreaks from "remark-breaks";
// 引入自定义样式，也可以写在全局CSS文件中
import './markdown.css';

export default function name({ posts }) {
  // 可选：预处理内容，将3个及以上连续换行替换为2个换行，强制生成段落分隔
  const processedContent = posts.Content.replace(/\n{3,}/g, '\n\n');

  return (
    <>
        <div>
          {posts.Title}
        </div>
      <div className="markdown-content">
        <ReactMarkdown 
          children={processedContent} 
          remarkPlugins={[remarkBreaks]}
          rehypePlugins={[rehypeRaw]} 
        />
      </div>
    </>
  );
}

步骤3：添加CSS样式控制间距 #

新建markdown.css文件，添加以下样式自定义排版间距：

/* 控制段落上下间距 */
.markdown-content p {
  margin: 1.2em 0;
  line-height: 1.6;
}
/* 控制换行的间距 */
.markdown-content br {
  margin: 0.5em 0;
  content: '';
  display: block;
}
/* 可以按需补充其他标签的间距，比如标题、列表、引用等 */
.markdown-content h1, .markdown-content h2, .markdown-content h3 {
  margin: 1.5em 0 0.8em 0;
}
.markdown-content ul, .markdown-content ol {
  margin: 1em 0;
  padding-left: 2em;
}

额外说明 #

如果手动添加的<br/>标签依然不生效，确认Strapi返回的内容中<br/>没有被转义为<br/>，如果出现转义，可以在预处理步骤中替换回来：

const processedContent = posts.Content.replace(/&lt;br\s*\/?&gt;/gi, '<br/>').replace(/\n{3,}/g, '\n\n');

内容的提问来源于stack exchange，提问作者Jay Modi