如何通过REST API传输Markdown并在前端渲染，保留原格式？

问题根源 #

JSON.stringify会自动将字符串中的换行符\n转义为\\n，但如果后端未正确解析转义字符，或前端还原时未将转义后的字符转回原始格式，就会导致换行等Markdown结构丢失。

标准实现方案 #

1. 传输阶段：直接封装原始Markdown #

无需手动修改Markdown内容，直接将原始字符串放入JSON payload即可，JSON序列化会自动处理转义：

// 前端发送示例
const markdownContent = `# 标题
这是一段带换行的内容
- 列表项1
- 列表项2`;

const request = await fetch('/api/save-markdown', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ content: markdownContent })
});

2. 后端接收与存储 #

后端接收到JSON后，直接解析并提取content字段保存，JSON解析器会自动还原转义的换行符，无需额外处理。

3. 前端还原与渲染 #

从API获取数据后，直接将返回的content字段传入Markdown渲染库（如marked、remark），确保渲染库正确识别换行：

// 前端渲染示例（以marked为例）
const response = await fetch('/api/get-markdown');
const data = await response.json();

// 配置marked启用换行解析
marked.setOptions({ breaks: true });
const renderedHtml = marked.parse(data.content);

document.getElementById('markdown-output').innerHTML = renderedHtml;

常见问题排查 #

• 禁止手动对Markdown字符串做额外转义（比如用replace(/\n/g, '\\n')），完全交给JSON序列化/反序列化处理
• 检查后端返回的JSON响应，确认content字段中的换行符已被正确还原（即显示为\n而非\\n）
• 若渲染后换行仍不生效，检查渲染库的配置：多数库默认需要开启breaks或类似选项，才能将单个\n转为HTML换行

内容的提问来源于stack exchange，提问作者Abhinav Thapa