介紹這個庫：C# Blazor 中顯示 Markdown 檔案

1 講目的

前幾天上線了一個線上 Icon 轉換工具，為了讓大家使用放心，改了一點程式碼，在轉換下載 Icon 圖示後立即刪除暫存檔案，並在工具下方貼上了工具的開發步驟和程式碼，大家看這樣改是否合適，見Issue 1。

這篇不講程式碼修改過程（因為工具和網站文章已經同步更新），本文講講在工具下方展示 Markdown 檔案的實作方式，先看效果：

為什麼要加這個功能？

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

1. 預設是不顯示的，點擊如何開發的？的按鈕載入開發文章說明。
2. 留言功能目前沒有（不排除後面加上），需要點擊我要建議（吐槽）按鈕跳轉到Dotnet9網站同篇文章留言。
3. 旁邊有個按鈕我要瀏覽原始碼可以點擊瀏覽工具原始碼。

下面說說在 Blazor 中怎麼展示 Markdown 檔案，先說明目前完成的功能：

1. 只是將 Markdown 檔案展示為 html。
2. 高亮目前未加。

2 開發步驟

參考blazor-markdown。

1. 引入套件

<PackageReference Include="BlazorMarkdown" Version="1.0.0" />
<PackageReference Include="HtmlSanitizer" Version="7.1.488" />

2. 注入元件

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;
});

3. 引用命名空間

_Imports.razor

@using BlazorMarkdown

4. 使用

準備好 Markdown 檔案，比如我放 wwwroot 下：

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