C#でMarkdownを表示するライブラリMarkDigの紹介

# 概要

MarkDigはC#でMarkdownを表示できるライブラリです。
同様の機能を持つ、Marked.NET、MarkdownSharpよりも[高速で動くらしいです。](https://github.com/lunet-io/markdig#analysis-of-the-results)

Webアプリで使う場合はHTMLに、WPFで使う場合は専用ControlかRichTextBoxに変換して表示できます。

# HTMLに変換する場合

Markdown文字列をHTMLに変換するのは`Markdig.Markdown.ToHtml(元Markdown文字列)`とするだけです。

以下のコードでは加えて、入力文字列をリソースファイルから取得して、生成したHTMLをファイルへ出力、ソースコードを見やすくする[Markdig.SyntaxHighlighting](https://github.com/RichardSlater/Markdig.SyntaxHighlighting)拡張を導入しました。

```csharp
private void CreateHtml()
{
    var pipeline = new MarkdownPipelineBuilder()
        .UseAdvancedExtensions()
        .UseSyntaxHighlighting()
        .Build();

    string sourceText = Properties.Resources.MarkDownText;
    string markdownText = Markdig.Markdown.ToHtml(sourceText, pipeline);
    const string ouputPath = "result.html";
    File.WriteAllText(ouputPath, markdownText);
}
```

出力結果は以下を参照してください。
[出力結果HTMLファイル](https://soi013.github.io/MarkDigTest/Index.html)

# WPFで表示する場合

WPFで表示する場合は`FlowDocument`に変換して`RichTextBox`に入力してもよいですが、[Markdig-WPF](https://github.com/Kryptos-FR/markdig.wpf)拡張を導入して`MarkDownViewer`を使用するほうが手軽です。
`<markdig:MarkdownViewer Markdown="元Markdown文字列" />`で表示できます。

以下のコードでは加えて、初期入力文字列をリソースファイルから取得して、TextBoxに指定。TextBoxのTextを変更するとMarkdownViewerに反映されるようにしました。またHyperLinkをクリック時にブラウザで開く処理も追加しました。

```xml:MainWindow.xaml
<Window
   x:Class="MarkDigTest.MainWindow"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:markdig="clr-namespace:Markdig.Wpf;assembly=Markdig.Wpf"
   xmlns:properties="clr-namespace:MarkDigTest.Properties"
   Title="MainWindow" Width="800" Height="650">
   <FrameworkElement.CommandBindings>
      <CommandBinding Command="{x:Static markdig:Commands.Hyperlink}" Executed="OpenHyperlink" />
   </FrameworkElement.CommandBindings>
   <UniformGrid Columns="2">
      <TextBox
         x:Name="sourceText"
         AcceptsReturn="True"
         Text="{x:Static properties:Resources.MarkDownText}" />
      <markdig:MarkdownViewer x:Name="Viewer" 
         Markdown="{Binding Text, ElementName=sourceText}" />
   </UniformGrid>
</Window>
```

```csharp:MainWindow.cs
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void OpenHyperlink(object sender, ExecutedRoutedEventArgs e)
    {
        Process.Start(new ProcessStartInfo("cmd", $"/c start {e.Parameter}") { CreateNoWindow = true });
    }
}
```

動作時のイメージは以下です。
左のTextBoxに入力すると、右のMarkdownViewerに反映されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120077/97a05c70-8646-a778-bf20-a25eda9491d6.png)

# 全体コード
WPF版の全体コードを以下に置いておきます。
https://github.com/soi013/MarkDigTest/tree/master

# 環境
VisualStudio 2019
C# 8
.NET Core 3.1

```xml:MarkDigTest.csproj
<ItemGroup>
  <PackageReference Include="Markdig" Version="0.18.0" />
  <PackageReference Include="Markdig.Wpf" Version="0.3.1" />
</ItemGroup>
```

# 参考
https://github.com/lunet-io/markdig

Markdownのサンプルは一部以下のリンクを元にしています。
https://qiita.com/tbpgr/items/989c6badefff69377da7

HTMLファイルを表示するためにGitHub.Pagesを使いました。
https://qiita.com/Yuki_Yamashina/items/5d8208c450195b65344c