BlazorでMarkDownEditorを作る(その１)

2019年11月12日

今回の内容はソースあります。

何か知らないけど、マークダウン好きなんだよね

あと、学習教材としては、Hello Worldの次にやるのにピッタリだと思うのね。
いきなり脱線するけど、マークダウンでHTML吐き出したりとかはあるけど、マインドマップ作ったりってあるのかな。
ほしいなーとふと思った。
要素が増えたときの描画の位置関係とか難しいのかな。
やるならたぶんCanvasで描画か、SVGか。。んー
あ、思考垂れ流しで思いっきり脱線した。

とりあえず、今回はBlazorをもっと触ってみようの回にする。

依存関係

Markdig(0.18.0)ってのを見つけたので、これを使ってみる。

Nugetからとる。Nugetパッケージマネージャ→ソリューションのNugetパッケージの管理

参照タブをクリックしてMarkdigで検索
選択してインストール(すでにインストールしちゃったのでボタンが非活性状態)

構成

各ステップごとにComponentを作っていく。

使うときはIndex.razorにコンポーネントを配置する。
こんな感じ

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<Step1></Step1>

ステップ1：クリックイベントでMarkDownからHTMLを生成する

@using Markdig
<div>
    <input type="text" @bind="@input" />
    <button @onclick="ExportText">ExportText</button>
    <div>@((MarkupString)output)</div>
</div>

@code {
    public string input { get; set; }
    public string output { get; set; }
    private void ExportText()
    {
        this.output = Markdown.ToHtml(this.input);
    }
}

上記コンポーネントを設置すると、こんな感じになる

outputをそのまま@outputとすると、 HTMLエンコードされてしまう

ちょっとしたハマりどころ？
HTMLエンコードを無効にしてそのまま出したいときは、@((MarkupString)output)という風にする。
razorでいうところの @Html.Raw(str)と一緒だろう。

C#Blazor

Posted by takumioda