はじめに

最近、Markdown 記法の利用が増えてきているようです。そこで、ASP.NET Core でも Markdown 記法が使えるか調べてみました。

要件は次の通り。

HTMLタグの入力は許さない
Markdown 記法のみ HTML に変換して出力する

結論としては Markdig というライブラリを使用することで、上記要件を実現することができました。

では、具体的な方法をご紹介します。

Markdig とは？

Markdig とは .NET, .NET Core 向けにオープンソースで開発されている Markdown 用ライブラリになります。ライセンスは「BSD-Clause 2 license」です。

「BSD-Clause 2 license」は、聞き慣れないライセンスですが、どうやら MIT ライセンスとほぼ同義なようです。具体的な用途が規定されているかの違いの模様。詳しくは以下の記事を参照してください。

技術/OSSライセンス/MITとBSD 2-clause の違い - Glamenv-Septzen.net

この Markdig ライブラリを利用することで、簡単に Markdown 記法を ASP.NET Core アプリケーションに組み込むことができます。

ASP.NET Core アプリケーションの作成と Markdig のインストール

まず、Visual Studio Codeで ASP.NET Core MVC のアプリケーションを作成します。

下記コマンドを実行します。

$ dotnet new mvc -o webapp

次に、以下のように webapp のディレクトリに移動して、Markdig をインストールします。

$ cd webapp
$ dotnet add package Markdig
$ dotnet restore

これで準備が整いました。

サンプルアプリケーションの作成

HomeController.cs に以下の名前空間の宣言をします。

using Markdig;
using System.Web;

HomeControllerクラスに以下のメソッドを追加します。このメソッド内の HttpUtility.HtmlEncode で HTMLタグを最初に HTML エスケープして無効にした後に、Markdown.ToHtml で Markdown を HTML に変換しています。

[HttpPost]
public IActionResult Index([FromForm] string myInputArea)
{
    ViewBag.Markdown = Markdown.ToHtml(HttpUtility.HtmlEncode(myInputArea));
    return View();
}

そして、index.html を以下のように書き換えることで Markdown を変換するサンプルができます。サンプルではスタイルをタグに直接記述していますが、実際のアプリケーションでは CSS で定義するようにしてください。

@{
    ViewData["Title"] = "Markdown Sample";
}
<br>
<div>
    <form method="POST">
        <input type="submit" value="変換"><br><br>
        <textarea name="myInputArea" id="myInputArea" cols="30" rows="10"></textarea>
        <div name="myInputArea" id="myParsedArea" style="width:250px;height:150px;background-color:aquamarine">
            @Html.Raw(@ViewBag.Markdown)
        </div>
    </form>
</div>