MarkView.Avalonia 12.0.1-beta.2

MarkView.Avalonia

A Markdig-powered markdown viewer control for Avalonia UI v12. Drop MarkdownViewer into any Avalonia window or panel to render rich markdown — headings, code blocks, tables, task lists, links, images, and more — using native Avalonia controls with a fully customizable theme.

Installation

dotnet add package MarkView.Avalonia

Quick Start

Include the default theme and add MarkdownViewer to your XAML:

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mv="using:MarkView.Avalonia">
  <Window.Styles>
    <StyleInclude Source="avares://MarkView.Avalonia/Themes/MarkdownTheme.axaml" />
  </Window.Styles>

  <mv:MarkdownViewer Markdown="# Hello, MarkView!" />
</Window>

To handle link clicks in code-behind:

viewer.LinkClicked += (_, e) =>
{
    // e.Url contains the clicked URL
    Process.Start(new ProcessStartInfo(e.Url) { UseShellExecute = true });
};

To use a custom Markdig pipeline:

viewer.Pipeline = new MarkdownPipelineBuilder()
    .UseAdvancedExtensions()
    .Build();

Supported Markdown Features

Extension Packages

MarkView.Avalonia ships optional NuGet packages that add richer rendering capabilities. Each package implements IMarkViewExtension and is activated via a convenience method on MarkdownViewer.

Syntax Highlighting (MarkView.Avalonia.SyntaxHighlighting)

Adds TextMate grammar-based syntax highlighting to fenced code blocks.

dotnet add package MarkView.Avalonia.SyntaxHighlighting

using TextMateSharp.Grammars;

viewer.UseTextMateHighlighting(ThemeName.DarkPlus); // default theme

The extension replaces the built-in CodeBlockRenderer with TextMateCodeBlockRenderer, which tokenises each line and emits coloured Run elements. Unsupported languages fall back to the default monochrome rendering automatically.

Available ThemeName values are defined by TextMateSharp.Grammars: DarkPlus, LightPlus, Monokai, SolarizedDark, SolarizedLight, and more.

SVG Images (MarkView.Avalonia.Svg)

Renders SVG images embedded in markdown (![desc](path/to/image.svg)), including data:image/svg+xml data URIs.

dotnet add package MarkView.Avalonia.Svg

viewer.UseSvg();

The extension inserts SvgImageLoader at the front of the image loader chain. Regular raster images continue to load via the built-in HTTP fallback.

Mermaid Diagrams (MarkView.Avalonia.Mermaid)

Renders fenced mermaid code blocks as live diagrams using an embedded NativeWebView and bundled mermaid.min.js (v11). On Linux, a plain-text fallback is shown instead.

dotnet add package MarkView.Avalonia.Mermaid

viewer.UseMermaid(initialHeight: 300); // height in device-independent pixels

Markdown syntax:

```mermaid
graph TD
  A[Start] --> B{Decision}
  B -- Yes --> C[End]
  B -- No  --> A
```

Combining extensions

All three can be stacked:

viewer
    .UseTextMateHighlighting()
    .UseSvg()
    .UseMermaid();

Extensions are applied in the order they are added to viewer.Extensions. Each extension's Register method is called once per render pass, before the Markdig pipeline is set up.

Writing your own extension

Implement IMarkViewExtension from the core package:

using MarkView.Avalonia.Extensions;
using MarkView.Avalonia.Rendering;

public class MyExtension : IMarkViewExtension
{
    public void Register(AvaloniaRenderer renderer)
    {
        // swap a renderer, add an image loader, or set a code highlighter
        renderer.ReplaceOrAdd<CodeBlockRenderer>(new MyCodeBlockRenderer());
    }
}

viewer.Extensions.Add(new MyExtension());

Theming / Customization

Include MarkdownTheme.axaml for default styles. Override any style class in your own Styles to customise appearance:

Example — increase heading size and add a bottom border:

<Style Selector="TextBlock.markdown-h1">
  <Setter Property="FontSize" Value="36" />
  <Setter Property="Foreground" Value="#1A1A2E" />
  <Setter Property="Margin" Value="0,12,0,6" />
</Style>

Known Limitations

Text selection is scoped to individual blocks (paragraphs, headings). Selecting text across multiple blocks (e.g. from a heading into the next paragraph) is not supported in v1.

License

MIT © Nicolas Musset