ライブラリの紹介：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. 使用する。

w w wrootのように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>