完美：C# Blazor中显示Markdown并添加代码高亮

昨天发了一篇介绍这个库：C# Blazor中显示Markdown文件，介绍怎么在Blazor中显示Markdown内容的文章，文章内的代码是没有高亮的，思来相去，还是要做好，于是百度到这篇文章.NET C# Blazor 服务端渲染Markdown，现在渲染效果如下：

自认为应该是比较完美了，下面说说怎么做的。

一、准备工具

1.1 添加Markdown转html包：Markdig

Markdig：Markdig 是一个快速、强大、符合CommonMark标准、可扩展的 .NET Markdown 处理器。

1.2 引入Prism插件

此Prism非彼Prism，是一个JS插件：Prism 是一个轻量级、健壮且优雅的语法高亮库。这是Dabblet的一个衍生项目。

在_Layout.cshtml的head中引入：

....








...


...

二、使用

我将Markdown展示单独提取成了组件MarkdownComponent.razor，将加载的Markdown文件相对路径、需要链接的文章链接和源码链接做成参数，方便后面其他工具复用，下面的代码片段主要在这个文件内。

组件参数定义：

@code {
    [Parameter]
    public string LocalPostFilePath { get; set; } = null!;

    [Parameter]
    public string RemotePostUrl { get; set; } = null!;

    [Parameter]
    public string SourceCodeUrl { get; set; } = null!;
}

Markdown内容读取，Markdown格式转html在OnInitializedAsync()方法中定义：

protected override async Task OnInitializedAsync()
{
    var markdownData = await File.ReadAllTextAsync(LocalPostFilePath);

    // markdown 转为 html
    var htmlData = Markdown.ToHtml(markdownData);

    // 转为 prism 支持的语言标记（不是必须，可以删除）
    htmlData = htmlData.Replace("language-golang", "language-go");

    // TODO: 使用 https://github.com/mganss/HtmlSanitizer 清洗html中的xss
    if (htmlData.Contains("

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await _jsRuntime.InvokeVoidAsync("Prism.highlightAll");
}

    @{
        if (_hasXss)
        {
            @_postHtmlContent.ToString()
        }
        else
        {
            @_postHtmlContent
        }
    }