Skip to content

Felix-CodingClimber/DotNetElements.Wpf.Markdown

Repository files navigation

About

This project provides a markdown renderer for WPF. Markdown is rendered to a FlowDocument. This implementation uses the popular Markdig library for parsing.

At the current state, all common markdown features are supported (There might be some missing edge cases). Some of the most used Markdig extensions are also supported.

Supported features:

  • CommonMark

Important

Currently there are no plans to support Raw HTML and HTML blocks

  • Pipe tables
  • Alert blocks (github)
  • Task lists
  • Code block syntax highlighting
  • Emphasis extras
  • Defined image size (![Image](img/exampleImg.png=100x100))
  • Auto links

Missing features we would like to implement:

  • Footnotes
  • Emoji extension (add support for colored font emoji)
  • Option to implement other Markdig extensions and provide custom renderers
  • Improved theme for light mode
  • Default theme for dark mode

Recommended setup

  1. Install nuget package > dotnet add package DotNetElements.Wpf.Markdown --version <insert-latest-version-here>

  2. Add styles to App.xaml

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/DotNetElements.Wpf.Markdown;Component/Themes/Generic.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>
  1. Add xaml namespace
xmlns:markdown="clr-namespace:DotNetElements.Wpf.Markdown;assembly=DotNetElements.Wpf.Markdown"
  1. Add MarkdownTextBlock
<markdown:MarkdownTextBlock x:Name="MarkdownTextBlock" FontFamily="Segoe UI" />
  1. Set the Text property (binding is supported)
MarkdownTextBlock.Text = "Hello world from **DotNetElements.Wpf.Markdown**";
  1. To change the styling options for the different markdown blocks, add a customized MarkdownThemes.cs
MarkdownThemes myTheme = MarkdownThemes.Default;
myTheme.InlineCodeBackground = new SolidColorBrush(Colors.HotPink);

MarkdownTextBlock.Theme = myTheme;

Third party notices

The project is a port of the CommunityToolkit MarkdownTextBlock component to the WPF framework.

See CommunityToolkit/Labs-Windows/MarkdownTextBlock

The code block syntax highlighting uses ColorCode-Universal and a customized version of ColorCode-WPF