构建Markdown Editor 编辑器

1.引用依赖组件

Markdig 和 Markdig.SyntaxHighlighting

2.创建单例注入实例

 public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");

            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

            builder.Services.AddSingleton<Markdig.MarkdownPipeline>(sp =>
            new Markdig.MarkdownPipelineBuilder()
            .UseAdvancedExtensions()
            .UseSyntaxHighlighting()
            .Build());

            await builder.Build().RunAsync();
        }
    }

@page "/editor"

@using Markdig
<!--@using--> @*Serilog*@

@inject MarkdownPipeline pipeline

<div class="row" style="height:600px;">
    <div class="col-6 h-100">
        <textarea class="form-control h-100" @bind-value="MarkdownText" @bind-value:event="oninput"></textarea>
    </div>
    <div class="col-6 h-100">
        @((MarkupString)HtmlToRender)
    </div>
</div>

@code {
    public string MarkdownText { get; set; } = string.Empty;
    private string _html = string.Empty;
    public string HtmlToRender
    {
        get
        {
            try
            {
                _html = Markdown.ToHtml(MarkdownText ?? string.Empty, pipeline);
                return _html;
            }
            catch(NullReferenceException nrx)
            {
                Console.WriteLine(nrx.ToString() + "Couldn't render markdown text!");
            }
            return _html;
        }
    }

}