あるSEのつぶやき・改

ITやシステム開発などの技術に関する話題を、取り上げたりしています。

.NET Core, ASP.NET CoreでMarkdown記法を実装する方法

はじめに

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

要件は次の通り。

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

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

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

Markdig とは?

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

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

この 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>

サンプルアプリケーションの実行

[F5]キーを押して、アプリケーションをビルドおよび実行します。

すると以下の画面が表示されます。

f:id:fnyablog:20180908100534p:plain

テキストボックスに Markdown 記法で入力し [変換] をクリックすると、以下のように Markdown が HTML に変換されていることが分かります。

f:id:fnyablog:20180908100619p:plain

f:id:fnyablog:20180908100627p:plain

こんどは HTML タグを直接入力して [変換] をクリックしてみます。

f:id:fnyablog:20180908100658p:plain

f:id:fnyablog:20180908100717p:plain

HTML タグは正しく HTML エスケープ処理がされていることが分かります。

おわりに

Markdown 記法を ASP.NET Core アプリケーションに組み込むのは難しいのではないかと思っていたのですが、実際やってみると思いの外簡単で拍子抜けしましたね。

逆に、ASP.NET Core アプリケーションの方でいろいろ手間取ってしまいました。

まだまだ修行が足りないようです。