如何用StringBuilder为pre标签中的Diffplex差异文本添加颜色样式？

完全可行，你可以通过在StringBuilder中为对应行追加HTML <span> 标签并设置内联样式来实现颜色区分，最终在<pre>标签中正常渲染格式和颜色。

具体操作步骤： #

1. 处理Diff结果行：遍历Diffplex生成的差异行，判断当前行是新增、删除还是无变化类型。
2. 追加样式标签：
   • 对新增行，用<span style="color: #2ecc71;">包裹整行内容（包括+符号），末尾加上</span>。
   • 对删除行，用<span style="color: #e74c3c;">包裹整行内容，末尾加上</span>。
   • 无变化的行保持原样即可，也可以保留缩进对齐让排版更整齐。

C#代码示例： #

using Diffplex.DiffBuilder.Model;
using System.Text;

// 假设已通过Diffplex生成差异结果
var diffResult = InlineDiffBuilder.Diff(oldText, newText);
var sb = new StringBuilder();

foreach (var line in diffResult.Lines)
{
    switch (line.Type)
    {
        case ChangeType.Inserted:
            sb.AppendLine($"<span style=\"color: #2ecc71;\">+ {line.Text}</span>");
            break;
        case ChangeType.Deleted:
            sb.AppendLine($"<span style=\"color: #e74c3c;\">- {line.Text}</span>");
            break;
        case ChangeType.Unchanged:
            sb.AppendLine($"  {line.Text}"); // 用两个空格对齐新增/删除行的符号位置
            break;
    }
}

// 最后将StringBuilder的内容放入HTML的<pre>标签中即可
// 示例：<pre>{sb.ToString()}</pre>

额外说明： #

• <pre>标签会保留所有空格和换行，嵌套<span>不会破坏原有格式——因为span是行内元素，不会改变文本的布局结构。
• 如果你不想让+/-符号变色，可以只包裹符号后的文本，但统一颜色的视觉区分效果更直观。
• 也可以用CSS类替代内联样式（比如定义.diff-inserted { color: green; }），然后在StringBuilder中追加<span class="diff-inserted">+ {line.Text}</span>，这样样式更易维护，但用内联样式直接通过StringBuilder实现完全满足需求。

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