React中使用react-diff-viewer无法高亮空行问题求解决方案

• 使用 React DiffViewer 展示两个 Java 文件差异
• 无法高亮修改文件（newValue）中被删除的空行
• 需求：让这些被删除的空行在对比视图中显示高亮

当前代码 #

<DiffViewer
    oldValue={selectedsrcFileContent}
    newValue={selecteddestFileContent}
    splitView={true}
    hideLineNumbers={false}
    disableWordDiff={true}
    compareMethod={DiffMethod.TRIMMED_LINES}
    renderContent={(source, diffType, diff, isHighlighted) => (
      <pre className={`diff-line ${isHighlighted ? "highlight" : ""}`}>
        {diffType === "deleted" ? (
          <span className="diff-deleted">{source}</span>
        ) : diffType === "added" ? (
          <span className="diff-added">{diff}</span>
        ) : (
          <span>{source}</span>
        )}
      </pre>
    )}
/>

问题原因与修复方案 #

核心问题在于使用了 DiffMethod.TRIMMED_LINES，该模式会在对比前修剪行内容，导致空行被忽略。修复步骤如下：

1. 切换对比模式：将 compareMethod 改为 DiffMethod.LINES，保留原始行内容（包括空行）进行对比
2. 处理空行渲染：在自定义渲染逻辑中显式处理空删除行，确保其可见并高亮

修改后的代码 #

<DiffViewer
    oldValue={selectedsrcFileContent}
    newValue={selecteddestFileContent}
    splitView={true}
    hideLineNumbers={false}
    disableWordDiff={true}
    compareMethod={DiffMethod.LINES} // 替换为LINES模式
    renderContent={(source, diffType, diff, isHighlighted) => {
      // 标记空删除行
      const isEmptyDeleted = diffType === "deleted" && source.trim() === "";
      // 用非空格字符确保空行可见
      const lineContent = isEmptyDeleted ? "\u00A0" : source;

      return (
        <pre className={`diff-line ${isHighlighted || isEmptyDeleted ? "highlight" : ""}`}>
          {diffType === "deleted" ? (
            <span className="diff-deleted">{lineContent}</span>
          ) : diffType === "added" ? (
            <span className="diff-added">{diff || "\u00A0"}</span>
          ) : (
            <span>{source}</span>
          )}
        </pre>
      );
    }}
/>

配套 CSS 样式 #

添加样式确保空删除行可见：

.diff-deleted {
  background-color: #ffebee; /* 删除行背景色 */
}
.diff-line.highlight {
  background-color: #fff3e0; /* 高亮背景色 */
}
.diff-deleted:empty::before {
  content: "\00a0"; /* 强制空行占据空间 */
}

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