Blazor でマークダウンを表示する

1. はじめに

   • 記事の目的と背景
     VS Code と .NET9 を利用して、Blazor Bootstrap プロジェクトを構築したときの備忘録
     Blazor Bootstrap を利用したかった理由としては、Markdonw コンポーネントを利用したかったから。
   • 想定読者
     Blazor Bootstrap を利用したプロジェクトを VS Code と .NET8/9 で構築したい人向け。

2. 環境・前提条件

   • 使用したOS／バージョン
     Windows11

   • 開発環境（IDE、ライブラリ、クラウドなど）
     Windows11, VS Code

   • 前提知識や準備しておくべきこと
     .Net8/9 のインストール
     VS Code のインストール
     Blazor Bootstrap プロジェクトの作成(記事参照：)

3. Blazor Page の追加

   • メニューにページを追加
     MainLayout.razor のメニューリスト４番目に追加

           navItems = new List<NavItem>
                  {
                      new NavItem { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match=NavLinkMatch.All},
                      new NavItem { Id = "2", Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter"},
                      new NavItem { Id = "3", Href = "/weather", IconName = IconName.Table, Text = "Fetch Data"},
                      new NavItem { Id = "4", Href = "/md", IconName = IconName.Table, Text = "マークダウン表示"},
   
                  };
   

   Pages フォルダに md.razor ファイルを追加する。

4. マークダウンの表示

   • コンポーネントの貼り付け
     Md.razor ファイルにコードを記述する。

   @page "/md"
   
   <h3>md</h3>
   
   <div class="row" style="max-height:486px;">
       <div class="col">
           <Markdown style="max-height: 437px;overflow-y:auto;">@markdown</Markdown>
       </div>
   </div>
   
   @code {
       private string markdown = "# Heading 1\n## Heading 2\n\n![BlazorBootstrap](https://demos.blazorbootstrap.com/images/logo/logo-color.svg =50)";
   }
   
   

   string markdown に設定した内容を表示できました。

   

   • マークダウンエディタにしてみる
     Md.razor ファイルにコードを記述する。

   @page "/md"
   <h3>md</h3>
   <div class="row border-bottom mb-3">
       <div class="col"><b>Markdown</b></div>
       <div class="col"><b>Preview</b></div>
   </div>
   <div class="row" style="max-height:486px;">
       <div class="col">
           <textarea class="form-control"
                     rows="18"
                     placeholder="Enter markdown here"
                     @bind="markdown"
                     @bind:event="oninput">
           </textarea>
       </div>
       <div class="col">
           <Markdown style="max-height: 437px;overflow-y:auto;">@markdown</Markdown>
       </div>
   </div>
   
   @code {
       private string markdown = "# Heading 1\n## Heading 2\n\n![BlazorBootstrap](https://demos.blazorbootstrap.com/images/logo/logo-color.svg =50)";
   }
   

   表示してみる。

   

   編集してプレビュー表示でできています。表示できました。簡単ですね。
   

   • マークダウンを外部ファイルから読み込む
     初期化処理にて wwwroot フォルダに配置した sample.md ファイルを読み込むように、コードを追加。パスは　WebHostEnvironment　から取得する。

   @page "/md"
   @inject IWebHostEnvironment WebHostEnvironment
   
   
   <h3>md</h3>
   
   <div class="row" style="max-height:486px;">
       <div class="col">
           <Markdown style="max-height: 437px;overflow-y:auto;">@markdown</Markdown>
       </div>
   </div>
   
   @code {
       private string markdown = "# Heading 1\n## Heading 2\n\n![BlazorBootstrap](https://demos.blazorbootstrap.com/images/logo/logo-color.svg =50)";
   
       protected override async Task OnInitializedAsync()
       {
           string wwwrootPath = WebHostEnvironment.WebRootPath;
           string filePath = Path.Combine(wwwrootPath, "sample.md");
           // JSON ファイルを読み込む
           if (File.Exists(filePath))
           {
               markdown = File.ReadAllText(filePath);
   
           }
           base.OnInitialized();
       }
   
   
   }
   
   

   sample.md ファイルを wwwroot 配下に作成（ファイルはUTF-8で記述が必要）

   # 見出しレベル1 (H1)
   ## 見出しレベル2 (H2)
   ### 見出しレベル3 (H3)
   #### 見出しレベル4 (H4)
   ##### 見出しレベル5 (H5)
   ###### 見出しレベル6 (H6)
   
   

   表示してみる。うまく表示されました。
   

   • マークダウンに画像を埋め込む
     sample.md ファイルに画像を記述してみます。
     画像は wwwroot パスに配置します。

   マークダウンの内容

   ![サンプル画像](sample.png "サンプル")
   
   # 見出しレベル1 (H1)
   ## 見出しレベル2 (H2)
   ### 見出しレベル3 (H3)
   #### 見出しレベル4 (H4)
   ##### 見出しレベル5 (H5)
   ###### 見出しレベル6 (H6)
   

   フォルダの内容
   

   表示してみます。表示されました。

   

5. ハマったポイント・トラブルシューティング

   • 実際に遭遇したエラーや課題
     特に課題はありませんでした。

   • 解決方法と参考リンク

6. 使ってみた感想

   • 良かった点／イマイチだった点
     コンポーネントの貼り付けだけで簡単にマークダウンを挿入できます。エディタにもなります。非常に簡単ですね。

7. まとめ

   • 記事の総括
     今回はマークダウンをrazorページ内に埋め込みを行いました。
     Blazor のソースコードはやはりシンプルでよいです。
     簡単にコピペして動作確認できますね。
     今後、chart や grid を使った記事を書いていく予定。

   • 参考資料のリンク
     Blazor Bootstrap のセットアップマニュアル(getting started)