Markdown换行问题的解决

背景

发现个有趣的bug，我在利用个人项目里面的markdown编辑器写文章的时候，发现编辑时的预览模式换行是正常的，但是编辑完成以后去详情里面查看就不正常了，它居然没给我换行，全挤在一行丑死了。

解决思路

查了一下原理，我编辑器预览使用的是 Bytemd 的换行插件（@bytemd/plugin-breaks），它会把单个换行符当作硬换行（生成 <br/>），但是文章详情页面用的是 react-markdown + remark-gfm，而Markdown 标准并不把单个换行当作段落或硬换行。也就是说你需要空行才会分段，或者需要专门的换行插件才会把单换行转成<br/>。大概了解清楚以后就知道修复思路了。

法一：用 CSS 强制保留换行（快速、简单、粗暴）

.markdown-body 或具体元素上增加：

.markdown-body { white-space: pre-wrap; }

会把所有空格与换行原样保留，适用于内容主要为纯文本的场景，但会影响 Markdown 的布局（如代码块/表格/内联元素的呈现），可以对部分预览区域单独启用，最后肯定还是得调整，我想了想用了法二。

法二：使用remark-breaks插件（快速、简单、优雅）

真是个优雅的插件，看来不少人遇到和我一样的问题，直接安装：

npm install remark-breaks

使用：

import remarkBreaks from 'remark-breaks';
// ...
<ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]}>
  {post.content}
</ReactMarkdown>

法三：数据修正

这也是一种思路，就是把存储的文章都定为“段落之间留一个空行”，保存时把单换行合并为段落。这相当于数据层面的修正，能避免渲染时依赖插件，但是吧，需要改写/迁移已有内容，我又懒得动了，思路仅供参考。