使用remark/rehype转换markdown时如何将换行符\n转为<br/>标签

方案1：开启内置配置（无需额外插件/代码） #

remark-parse本身自带换行处理的配置项，直接开启breaks即可将markdown中的普通换行符直接转换为HTML的<br/>标签，无需额外引入插件：

import { remark } from 'remark'
import remarkRehype from 'remark-rehype'
import rehypeStringify from 'rehype-stringify'

const result = await remark()
  // 开启breaks配置，单个换行自动转br
  .use({ settings: { breaks: true } })
  .use(remarkRehype)
  .use(rehypeStringify)
  .process(你的markdown内容)

console.log(String(result))

默认情况下remark只会将「两个空格+换行」或者「两个连续换行」识别为换行，开启breaks后就会将所有普通单个换行都转换为<br/>。

方案2：自定义remark插件（适配特殊需求） #

如果你有额外的过滤需求，比如需要排除代码块、引用块内的换行转换，可以自己写一个小型自定义插件实现精准控制：

1. 首先安装unist工具库用于遍历语法树：
   npm install unist-util-visit
2. 编写插件代码：

import { visit } from 'unist-util-visit'

function remarkCustomLineBreak() {
  return (tree) => {
    visit(tree, 'text', (node, index, parent) => {
      // 可自行添加过滤规则，比如排除代码块内的换行：
      // if (parent.type === 'code' || parent.type === 'inlineCode') return

      const textFragments = node.value.split('\n')
      // 没有换行直接跳过
      if (textFragments.length < 2) return

      const newNodes = []
      textFragments.forEach((fragment, idx) => {
        if (fragment) newNodes.push({ type: 'text', value: fragment })
        if (idx !== textFragments.length - 1) newNodes.push({ type: 'break' })
      })
      // 替换原文本节点
      parent.children.splice(index, 1, ...newNodes)
    })
  }
}

3. 引入插件到处理流程即可：

const result = await remark()
  .use(remarkCustomLineBreak)
  .use(remarkRehype)
  .use(rehypeStringify)
  .process(你的markdown内容)

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