1 講目的

前幾天上線了一個在線Icon轉換工具^[1]，為了讓大家使用放心，改了點代碼，在轉換下載Icon圖標后立即刪除臨時文件，并在工具下面貼上了工具的開發步驟和代碼，大家看這樣改是否合適，見Issue 1^[2]。

這篇不講代碼修改過程(因為工具^[3]和網站博文^[4]已經同步更新)，本文講講在工具下方展示Markdown文件的實現方式，先看效果：

Blazor中顯示Markdown

為啥要加這個功能？

我的想法是，除了提供工具免費使用外，也能讓大家了解這個工具是如果開發的，這樣應該更方便：

默認是不顯示的，點擊如何開發的？的按鈕加載開發文章說明。

評論功能目前沒有（不排除后面加上），需要點擊我要建議（吐槽）跳轉到Dotnet9^[5]網站同篇博文^[6]留言。

旁邊有個按鈕我要瀏覽源碼可以點擊瀏覽工具源碼。

下面說說在Blazor中怎么展示Markdown文件，先說明目前完成的功能：

只是將Markdown文件展示為html。

高亮目前未加。

2 開發步驟

參考blazor-markdown^[7]。

引入包

<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?attributesvar?sanitizer?=?new?HtmlSanitizer();sanitizer.AllowedAttributes.Add("class");return?sanitizer; });

引用命令空間

_Imports.razor

@using?BlazorMarkdown

使用

準備好Markdown文件，比如我放wwwroot下：

Markdown文件

在IcoTool.razor中就可以直接使用了：

<Markdown?FilePath="wwwroot/2022/02/2022-02-22_02.md"/>

總結

完了，就是這么簡單，效果見文章開頭，今天不啰嗦。

忘了，markdown中有圖片等多媒體文件，記得加上這些樣式實現自適應：

<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>

參考資料

[1]

在線Icon轉換工具: https://tool.dotnet9.com/ico

[2]

Issue 1: https://github.com/dotnet9/dotnet9.com/issues/1

[3]

工具: https://tool.dotnet9.com/ico

[4]

博文: https://dotnet9.com/1715

[5]

Dotnet9: https://dotnet9.com

[6]

博文: https://dotnet9.com/1715

[7]

blazor-markdown: https://github.com/georgemathieson/blazor-markdown

總結

以上是生活随笔為你收集整理的介绍这个库：C# Blazor中显示Markdown文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。