Is there a way to output text or string in an html pre tag from a string builder with styling?

Question

I am using a Diffplex tool to compare two strings to see which words have been added, deleted etc. I can get the words or sentences which have been added or deleted with ease and display them in an html pre tag. What I was using is appending a + and - using string builder on words added and removed respectively and indeed its showing without a problem. The code is below;

        StringBuilder sb = new StringBuilder();

        string oldText = OldContent;
        string newText = newContent;

        var d = new Differ();
        var builder = new InlineDiffBuilder(d);
        var result = builder.BuildDiffModel(oldText, newText);

        foreach (var line in result.Lines)
        {
            if (line.Type == ChangeType.Inserted)
            {
                sb.Append("+ ");
            }
            else if (line.Type == ChangeType.Deleted)
            {
                sb.Append("- ");
            }
            else if (line.Type == ChangeType.Modified)
            {
                sb.Append("* ");
            }
            else if (line.Type == ChangeType.Imaginary)
            {
                sb.Append("? ");
            }
            else if (line.Type == ChangeType.Unchanged)
            {
                //sb.Append("  ");
            }

        sb.Append(line.Text + "
");
        ViewBag.result = sb.ToString();

I am returning the string to an html pre tag like below;

@ViewBag.result

Below is a sample output of the result
+ This line has been added

- This line has been deleted

The + and - are showing at the start of the sentences without a problem. Now My question; Is it possible to output a sentence or words which I am appending the + symbol green and the one with - symbol red? If so how can I approach this and can I append the styling using the string builder then send it and If so how can I approach this?

pistone sanjama · Answer

I managed to solve it by rendering the string as html using tag helpers in the view like below. I added span tags and gave them an ID which I am using for the colors;

    StringBuilder sb = new StringBuilder();

    string oldText = Document.OldContent;
    string newText = Document.Contents;

    var d = new Differ();
    var builder = new InlineDiffBuilder(d);
    var result = builder.BuildDiffModel(oldText, newText);

    foreach (var line in result.Lines)
    {
        if (line.Type == ChangeType.Inserted)
        {
            sb.Append("+ ");
        }
        else if (line.Type == ChangeType.Deleted)
        {
            sb.Append("- ");
        }
        else if (line.Type == ChangeType.Modified)
        {
            sb.Append("* ");
        }
        else if (line.Type == ChangeType.Imaginary)
        {
            sb.Append("? ");
        }
        else if (line.Type == ChangeType.Unchanged)
        {
            //sb.Append("  ");
        }

        sb.Append(line.Text + " 
");
    }
ViewBag.result = sb.ToString();

The tag helpers in the view;

@using System.Net
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Rendering my string as html;

@Html.Raw(@WebUtility.HtmlDecode(ViewBag.result))

Styling with the classes;

Is there a way to output text or string in an html pre tag from a string builder with styling?

1 Answers