Blazor shown wrong HTML character codes-CodePudding

I am using a complex object whose values are represented with Blazor. Among others there is a list of strings. Some strings contain a bullet, but these are represented as rectangles.

How can I manipulate the display so that the bullets are displayed?

My string:

razor file:

    @for (int i = 0; i < @item.Highlight.Count() && i < 5; i  )
    {
        <div >@((MarkupString)@item.Highlight[i])</div>
    }

The bulled at the html page:

CodePudding user response：

You could replace • with the HTML equivalent •

@for (int i = 0; i < @item.Highlight.Count() && i < 5; i  )
    {
        <div >@((MarkupString)@item.Highlight[i].Replace("•", "&#x2022;"))</div>
    }

Then casting it as MarkupString should render it properly.

CodePudding user response：

I've tried to imitate the same string data as you have, and, unfortunately, I could not reproduce this issue. It is pretty hard to tell where is the problem: CSS, fonts, metatags, string itself or something else. Anyways, according to the positive reaction to Waragi's suggestion, you could try some of these options:

Try to put bullet point HTML Unicode outside of your razor parentheses, like this:

<div >&#x2022;@((MarkupString)item?.Highlight.Replace("•", ""))</div>

Also, you can avoid adding a bullet point HTML Unicode above by adding some styles to searchHighlight:

<div >@item?.Highlight.Replace("•", "")</div>

<style>
    .searchHighlight::before {
        content: "\2022";
    }
</style>

I hope it helps!