レッスン1 目的
数日前にオンラインIcon変換ツールを公開しました。安心してご利用いただくため、コードを一部修正し、Iconアイコンの変換・ダウンロード後に一時ファイルを即座に削除する処理を追加しました。また、ツール下部に開発手順とコードを掲載しています。この修正が適切かどうか、Issue 1をご参照ください。
この記事ではコード修正のプロセスについては説明しません（ツールとサイトのブログ記事で既にアップデート済みのため）。代わりに、ツール下部にMarkdownファイルを表示する実装方法をご紹介します。まずは効果をご覧ください。
なぜこの機能を追加したのか？
無料でツールを提供するだけでなく、このツールがどのように開発されたのかをユーザーに知っていただくことで、より利便性が高まると考えました。
- デフォルトでは非表示で、「どのように開発されたのか？」ボタンをクリックすると開発記事が表示されます。
- 現状コメント機能はありません（将来追加する可能性あり）。「ご意見（ご不満）はこちら」ボタンをクリックすると、Dotnet9サイトの同一ブログ記事へ遷移し、コメントを残せます。
- 隣に「ソースコードを見る」ボタンがあり、ツールのソースコードを閲覧できます。
以下、BlazorでMarkdownファイルを表示する方法を説明します。まず現時点で実装済みの機能は次のとおりです。
- MarkdownファイルをHTMLとして表示する。
- ハイライトは未実装。
2 開発手順
blazor-markdownを参考にしています。
- パッケージの追加
<PackageReference Include="BlazorMarkdown" Version="1.0.0" />
<PackageReference Include="HtmlSanitizer" Version="7.1.488" />
- コンポーネントの注入
Program.cs
builder.Services.AddScoped<IHtmlSanitizer, HtmlSanitizer>(x =>
{
// 必要に応じてサニタイザーのルールを設定
// ここではデフォルトのルールに加えてclass属性を許可
var sanitizer = new HtmlSanitizer();
sanitizer.AllowedAttributes.Add("class");
return sanitizer;
});
- 名前空間の参照
_Imports.razor
@using BlazorMarkdown
- 使用例
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>