昨天發了一篇介紹這個庫：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
中引入：
。。。。<！——重置瀏覽器樣式——><！——程式碼塊主題——><！——工具欄外掛——><！——行號外掛——>。。。。。。<！——prism核心js （用於渲染程式碼塊）——><！——顯示程式碼塊行號——><！——工具欄（一些外掛的前置依賴）——><！——程式碼塊顯示語言名稱——><！——複製程式碼——><！——自動去cdn載入對應語言的程式碼高亮js——>二、使用
我將
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（“ 最後一步，需要在元件完成後，呼叫 Prism 外掛方法，寫在方法 OnAfterRenderAsync（bool firstRender） 中，這是做程式碼高亮的關鍵程式碼： protected override async Task OnAfterRenderAsync（bool firstRender）{ await _jsRuntime。InvokeVoidAsync（“Prism。highlightAll”）；} 渲染相對來說就簡單了（只針對我們使用），見下面的程式碼：
在
IcoTool。razor
呼叫該元件：
當然元件封裝看個人需求，大致思路是上面的，就不貼詳細程式碼了，有興趣看看Dotnet9工具箱原始碼。
參考文章：
。NET C# Blazor 服務端渲染Markdown
