當(dāng)前位置：首頁(yè) > 编程语言 > C# >内容正文

C#

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

發(fā)布時(shí)間：2023/12/4 C# 29 豆豆

生活随笔收集整理的這篇文章主要介紹了完美：C# Blazor中显示Markdown并添加代码高亮小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

昨天發(fā)了一篇介紹這個(gè)庫(kù)：C# Blazor中顯示Markdown文件，介紹怎么在Blazor中顯示Markdown內(nèi)容的文章，文章內(nèi)的代碼是沒有高亮的，思來相去，還是要做好，于是百度到這篇文章.NET C# Blazor 服務(wù)端渲染Markdown，現(xiàn)在渲染效果如下：

自認(rèn)為應(yīng)該是比較完美了，下面說說怎么做的。

一、準(zhǔn)備工具

1.1 添加Markdown轉(zhuǎn)html包：Markdig

Markdig：Markdig 是一個(gè)快速、強(qiáng)大、符合CommonMark標(biāo)準(zhǔn)、可擴(kuò)展的 .NET Markdown 處理器。

<PackageReference?Include="Markdig"?Version="0.27.0"?/>

1.2 引入Prism插件

此Prism非彼Prism，是一個(gè)JS插件：Prism 是一個(gè)輕量級(jí)、健壯且優(yōu)雅的語法高亮庫(kù)。這是Dabblet的一個(gè)衍生項(xiàng)目。

在_Layout.cshtml的head中引入：

二、使用

我將Markdown展示單獨(dú)提取成了組件MarkdownComponent.razor，將加載的Markdown文件相對(duì)路徑、需要鏈接的文章鏈接和源碼鏈接做成參數(shù)，方便后面其他工具復(fù)用，下面的代碼片段主要在這個(gè)文件內(nèi)。

組件參數(shù)定義：

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

Markdown內(nèi)容讀取，Markdown格式轉(zhuǎn)html在OnInitializedAsync()方法中定義：

protected?override?async?Task?OnInitializedAsync() {var?markdownData?=?await?File.ReadAllTextAsync(LocalPostFilePath);//?markdown?轉(zhuǎn)為?htmlvar?htmlData?=?Markdown.ToHtml(markdownData);//?轉(zhuǎn)為?prism?支持的語言標(biāo)記（不是必須，可以刪除）htmlData?=?htmlData.Replace("language-golang",?"language-go");//?TODO:?使用?https://github.com/mganss/HtmlSanitizer?清洗html中的xssif?(htmlData.Contains("<script")?||?htmlData.Contains("<link")){_hasXss?=?true;}//?將?普通文本?轉(zhuǎn)為?可以渲染的html的類型_postHtmlContent?=?(MarkupString)?htmlData; }

最后一步，需要在組件完成后，調(diào)用Prism插件方法，寫在方法OnAfterRenderAsync(bool firstRender)中，這是做代碼高亮的關(guān)鍵代碼：

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

渲染相對(duì)來說就簡(jiǎn)單了（只針對(duì)我們使用），見下面的代碼：

<div?class="line-numbers">@{if?(_hasXss){@_postHtmlContent.ToString()}else{@_postHtmlContent}} </div>

在IcoTool.razor調(diào)用該組件：

<MarkdownComponentLocalPostFilePath="wwwroot/2022/02/2022-02-22_02.md"RemotePostUrl="https://dotnet9.com/1715"SourceCodeUrl="https://github.com/dotnet9/dotnet9.com/blob/develop/src/Dotnet9.Tools.Web/Pages/Public/ImageTools/IcoTool.razor"/>

當(dāng)然組件封裝看個(gè)人需求，大致思路是上面的，就不貼詳細(xì)代碼了，有興趣看看Dotnet9工具箱源碼。

參考文章：

.NET C# Blazor 服務(wù)端渲染Markdown

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的完美：C# Blazor中显示Markdown并添加代码高亮的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： .NET6之MiniAPI(十九)：NL
下一篇：使用 FieldMask 提高 C# g