Blazor 앱에서 문자열을 강조 표시

Blazor 클라이언트 앱에서 특정 문자열을 강조 표시합니다.

개발 환경

Windows10
Visual Studio 2019 미리보기
.Net Core 3.1

MarkupString에서 html 코드 생성

Blazor 클라이언트 앱의 기본 프로젝트인 FetchData.razor에서 Summary를 강조 표시합니다.
입력 영역에서 텍스트를 입력하고 Enter 키를 누르면 바인딩된 변수가 평가되고 입력된 문자열을 강조 표시합니다.
C#의 코드에서 html 코드를 생성할 때는 string 형이면 html 태그가 그대로 표시되어 버리므로 MarkupString 형으로 해 줍니다.

FetchData.razor

@page "/fetchdata"
@inject HttpClient Http

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    @*Summaryをハイライトする*@
                    <td>@(WrapHighlight(@forecast.Summary,HighlightString))</td>
                </tr>
            }
        </tbody>
    </table>

    //ハイライトする文字を入力
    <p>
        Highlight:
        <input type="text" @bind-value=@HighlightString />
    </p>
}

@code {

    // ハイライトのバインド用変数を用意
    private string HighlightString = "";

    // ハイライト用のhtmlを作成する
    // 文字をハイライトするタグをつけているだけ
    MarkupString WrapHighlight(string str,string keyword)
    {
        var ret = str;
        if(str.IndexOf(keyword) != -1)
        {
            var start_index = str.IndexOf(keyword);
            var skip_index = start_index + keyword.Length;

            ret = string.Format("{0}<span style=\"background: linear-gradient(transparent 0%, #ffff66 0%)\">{1}</span>{2}",
                str.Substring(0, start_index),
                keyword,
                str.Substring(skip_index)
                );
        }

        return (MarkupString)ret; 
    }

    private WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await Http.GetJsonAsync<WeatherForecast[]>("sample-data/weather.json");
    }

    public class WeatherForecast
    {
        public DateTime Date { get; set; }

        public int TemperatureC { get; set; }

        public string Summary { get; set; }

        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    }
}