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

概要

MarkDigはC#でMarkdownを表示できるライブラリです。
同様の機能を持つ、Marked.NET、MarkdownSharpよりも高速で動くらしいです。

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

HTMLに変換する場合

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

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

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ファイル

WPFで表示する場合

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

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

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>

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に反映されます。

全体コード

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

環境

VisualStudio 2019
C# 8
.NET Core 3.1

MarkDigTest.csproj

<ItemGroup>
  <PackageReference Include="Markdig" Version="0.18.0" />
  <PackageReference Include="Markdig.Wpf" Version="0.3.1" />
</ItemGroup>

参考

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

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