昨天发了一篇关于这个库的文章:C# Blazor中显示的markdown文件，以及如何在Blazor中显示Markdown内容。文章中的代码没有突出显示，但还是要做好，所以百度在。NET C# Blazor服务器的这篇文章，现在渲染效果如下:

我觉得应该很完美。下面是怎么做的。

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

& ltPackageReference Include = & # 34Markdig & # 34版本= & # 34；0.27.0"/& gt； 1.2 Prism插件介绍这个Prism是一个JS插件:Prism是一个轻量级的、健壮的、优雅的语法高亮库。这是Dabblet的衍生项目。

在_Layout.cshtml的头中介绍:

& lthead & gt .... & lt；！-重置浏览器样式-& gt； & lt；link rel = & # 34样式表& # 34；href = & # 34https://cdn . jsdelivr . net/NPM/normalize . CSS @ 8 . 0 . 1/normalize . CSS & # 34；& gt & lt；！-代码块主题-& gt； & lt；link rel = & # 34样式表& # 34；href = & # 34https://cdn . jsdelivr . net/NPM/prism js @ 1 . 27 . 0/themes/prism-coy . min . CSS & # 34；& gt & lt；！-工具栏插件-& gt； & lt；link rel = & # 34样式表& # 34；href = & # 34https://cdn . jsdelivr . net/NPM/prism js @ 1 . 27 . 0/plugins/toolbar/prism-toolbar . min . CSS & # 34；& gt & lt；！-行号插件-& gt； & lt；link rel = & # 34样式表& # 34；href = & # 34https://cdn . jsdelivr . net/NPM/prism js @ 1 . 27 . 0/plugins/line-numbers/prism-line-numbers . min . CSS & # 34；& gt ... & lt；/head & gt； & lt；body & gt ... & lt；！- prism core js(用于渲染代码块)-& gt； & lt；脚本src = & # 34https://cdn . jsdelivr . net/NPM/prism js @ 1 . 27 . 0/prism . min . js & # 34；& gt& lt/script & gt； & lt；！-显示代码块行号-& gt； & lt；脚本src = & # 34https://cdn . jsdelivr . net/NPM/prism js @ 1 . 27 . 0/plugins/line-numbers/prism-line-numbers . min . js & # 34；& gt& lt/script & gt； & lt；！-工具栏(某些插件的预依赖)-& gt； & lt；脚本src = & # 34https://cdn . jsdelivr . net/NPM/prism js @ 1 . 27 . 0/plugins/toolbar/prism-toolbar . min . js & # 34；& gt& lt/script & gt； & lt；！-代码块显示语言名称-& gt； & lt；脚本src = & # 34https://cdn . jsdelivr . net/NPM/prism js @ 1 . 27 . 0/plugins/show-language/prism-show-language . min . js & # 34；& gt& lt/script & gt； & lt；！-复制代码-& gt； & lt；脚本src = & # 34https://cdn . jsdelivr . net/NPM/prism js @ 1 . 27 . 0/plugins/copy-to-clipboard/prism-copy-to-clipboard . min . js & # 34；& gt& lt/script & gt； & lt；！-自动转到cdn加载相应语言的代码高亮JS->: & lt；脚本src = & # 34https://cdn . jsdelivr . net/NPM/prism js @ 1 . 27 . 0/plugins/auto loader/prism-auto loader . min . js & # 34；& gt& lt/script & gt； & lt；/body & gt； 2。使用，我将Markdown显示单独提取到一个组件MarkdownComponent.razor中，并将加载的Markdown文件的相对路径、要链接的文章的链接和源代码的链接做成参数，方便后面其他工具的重用。下面的代码片段主要在这个文件中。

组件参数定义:

@code { [Parameter] 公共字符串LocalPostFilePath { get设置；} = null！； [Parameter] 公共字符串RemotePostUrl { get设置；} = null！； [Parameter] 公共字符串SourceCodeUrl { get设置；} = null！； } Markdown内容读取，Markdown格式到html是在OnInitializedAsync()方法中定义的:

protected override async Task on initializedasync() { var markdown data = await File。ReadAllTextAsync(LocalPostFilePath)； //Markdown to HTML var HTML data = Markdown。转换为HTML(降价数据)； //更改为prism支持的语言标记(不需要，可以删除) html data = html data . replace(& # 34；语言-golang & # 34；, "语言-go & # 34；); // TODO:使用https://github.com/mganss/HtmlSanitizer清理XSS if(html data . contains(& # 34；& lt脚本& # 34；)|| htmlData。包含(& # 34；& lt链接& # 34；)) { _ hasXss = true； } //将普通文本转换为可以呈现的html的类型 _ post html content =(markup string)html data； } 最后一步是在组件完成后调用Prism插件方法，并将其写入onafterrenderrasync(bool first render)方法中，这是突出显示代码的关键代码:

受保护的覆盖异步任务OnAfterRenderAsync(bool first render) { await _ js runtime。InvokeVoidAsync(& # 34；Prism.highlightAll & # 34); } 渲染比较简单(仅供我们使用)，参见下面的代码:

& ltdiv class = & # 34行号& # 34；& gt @ { if(_ hasXss) { @ _ post html content。ToString() } else { @ _ post html content } } & lt；/div & gt； 在IcoTool.razor中调用这个组件:

& ltmarkdown component LocalPostFilePath = & # 34；wwwroot/2022/02/2022-02-22 _ 02 . MD & # 34； remote posturl = & # 34；https://dotnet9.com/1715" source codeurl = & # 34；https://github . com/dot net 9/dot net 9 . com/blob/develop/src/dot net 9。Tools.Web/Pages/Public/ImageTools/IcoTool.razor"/& gt； 当然，组件封装要看个人需求。大致思路在上面，详细代码就不贴了。有兴趣看看Dotnet9工具箱的源码。

参考文章: