介紹這個庫：C# Blazor中顯示Markdown文件
1 講目的
前幾天上線了一個在線Icon轉(zhuǎn)換工具，為了讓大家使用放心，改了點代碼，在轉(zhuǎn)換下載Icon圖標(biāo)后立即刪除臨時文件，并在工具下面貼上了工具的開發(fā)步驟和代碼，大家看這樣改是否合適，見Issue 1。
這篇不講代碼修改過程(因為工具和網(wǎng)站博文已經(jīng)同步更新)，本文講講在工具下方展示Markdown文件的實現(xiàn)方式，先看效果：
為啥要加這個功能？
我的想法是，除了提供工具免費使用外，也能讓大家了解這個工具是如果開發(fā)的，這樣應(yīng)該更方便：
默認(rèn)是不顯示的，點擊
如何開發(fā)的？的按鈕加載開發(fā)文章說明。評論功能目前沒有（不排除后面加上），需要點擊
我要建議（吐槽）按鈕跳轉(zhuǎn)到Dotnet9網(wǎng)站同篇博文留言。旁邊有個按鈕
我要瀏覽源碼可以點擊瀏覽工具源碼。
下面說說在Blazor中怎么展示Markdown文件，先說明目前完成的功能：
只是將Markdown文件展示為html。
高亮目前未加。
2 開發(fā)步驟
參考blazor-markdown。
引入包
<PackageReference?Include="BlazorMarkdown"?Version="1.0.0"?/>
<PackageReference?Include="HtmlSanitizer"?Version="7.1.488"?/>
注入組件
Program.cs
builder.Services.AddScoped<IHtmlSanitizer,?HtmlSanitizer>(x?=>
{
????//?Configure?sanitizer?rules?as?needed?here.
????//?For?now,?just?use?default?rules?+?allow?class?attributes
????var?sanitizer?=?new?HtmlSanitizer();
????sanitizer.AllowedAttributes.Add("class");
????return?sanitizer;
});
引用命令空間
_Imports.razor
@using?BlazorMarkdown
使用
準(zhǔn)備好Markdown文件，比如我放wwwroot下：
在IcoTool.razor中就可以直接使用了：
<Markdown?FilePath="wwwroot/2022/02/2022-02-22_02.md"/>
總結(jié)
完了，就是這么簡單，效果見文章開頭，今天不啰嗦。
忘了，markdown中有圖片等多媒體文件，記得加上這些樣式實現(xiàn)自適應(yīng)：
<style>
? ?h3 {
? ? ? ?border-bottom: 1px solid #eee;
? ? ? ?margin-top: 50px;
? ? ? ?padding-bottom: 10px;
? ?}
? ?pre {
? ? ? ?background: #1E1E1E;
? ? ? ?color: #eee;
? ? ? ?overflow-x: auto;
? ? ? ?padding: 0.5em !important;
? ? ? ?white-space: pre;
? ? ? ?word-break: normal;
? ? ? ?word-wrap: normal;
? ?}
? ?img, video, source { max-width: 100% }
? ?pre > code { white-space: pre; }
</style>
