Markdown.XAMLを使ってWPFでMarkdownテキストをレンダリングする

この記事は、XAML Advent Calendar 2013用です。今日は、MarkdownをWPFアプリケーションに表示する方法についてです。
---

Windows Phoneでmarkdownで書いたテキストをhtmlに変換して表示する を見て、そういえばMarkdownを表示するためのライブラリがあったことを思い出した。

その名もMarkdown.XAML。これは、MarkdownテキストをFlowDocumentに変換してくれる。使い方はざっくり言うと、TextToFlowDocumentConverterというコンバータが使えるようになるので、FlowDocumentScrollViewerのようなFlowDocumentを表示してくれるコントロールに、Markdownテキストが入ったプロパティとこのコンバータをセットでバインドしておくだけでOK.

詳しい使い方は以下の通り。

1. 下準備

Markdown.XAMLをclone or zipでダウンロードして、Visual Studioで開き、コンパイルする。

そうすると、build\Markdown.Xaml\(Configuration)のあたりにMarkdown.Xaml.dllができるので、これを、Markdownを表示させたいプロジェクトに持っていって、参照させる。

NuGetになさそうなのが残念だけど、すんなりコンパイルできるのでまぁ。

2. Markdownテキストを適当なプロパティに入れておく

ファイルから読んでとか、いろいろありそうだが、ここの本題ではないので、ここでは適当な文字列を返すプロパティを作っておく。

3. リソースに、MarkdownとTextToFlowDocumentConverterを定義する

TextToFlowDocumentConverterを作り、そこに実体であるMarkdownオブジェクトを紐づける。とりあえずこんなかんじ:

4. FlowDocumentをレンダリングするコントロールを配置する

FlowDocumentScrollViewerを配置して、さきほどのプロパティとコンバータをバインドする。


シンプルに表示したいだけなら、これだけ。

できたものはこんなかんじ：

活用編

FlowDocumentになっているので、もう少しWPFに寄った形で使える。

1. パネルの見た目を変更する

ちゃんとパネルも見えているので、たとえばパネルの背景色を変えたりすることができる。FlowDocumentScrollViewerのプロパティも当然使える。

2. スタイルを設定する

たとえば、文字色を変えたければ、このようにいつもの通りStyleを定義することで、変更することができる。


結果はこんなかんじ：

詳しくはデモがあるので見るとわかりやすいと思う。
https://github.com/theunrepentantgeek/Markdown.XAML/blob/master/src/Markdown.Xaml.Demo/MainWindow.xaml


----

どうでしょうか。わりと簡単に使えると思うので、適当なテキストを出したいときなんかにどうぞ。