Markdown.Avalonia

Markdown.Avalonia transforms Markdown into Avalonia UI controls (such as Border, Grid, and TextBlock).

Note that the standard Markdown.Avalonia package depends on AvaloniaEdit for syntax highlighting. If you want a version without this dependency, use Markdown.Avalonia.Tight instead.

You can install Markdown.Avalonia using NuGet. There are two packages available depending on your requirements:

• Markdown.Avalonia: The standard package.
• Markdown.Avalonia.Tight: A specialized version.

Check the NuGet gallery for the latest versions.

dotnet add package Markdown.Avalonia

You can embed Markdown content directly within the tags of a MarkdownScrollViewer in your XAML file.

<md:MarkdownScrollViewer>
  # Heading1
  Hello Markdown.Avalonia!
</md:MarkdownScrollViewer>

You can render Markdown in your Avalonia application using the MarkdownScrollViewer control via three different methods:

1. Load .md from AvaloniaResource

Use the Source property to point to a Markdown file embedded in your project using the avares:// URI scheme.

2. Write markdown in XAML

You can write raw Markdown content directly inside the MarkdownScrollViewer tags in your XAML file.

3. Use Data Binding

Bind the Markdown property to a string property in your ViewModel.

<!-- 1. Load from AvaloniaResource -->
<md:MarkdownScrollViewer
   Source="avares://YourAssemblyName/Assets/Test.md"/>

<!-- 2. Write markdown in xaml -->
<md:MarkdownScrollViewer>
  # Heading1
  Hello Markdown.Avalonia!
</md:MarkdownScrollViewer>

<!-- 3. With binding -->
<md:MarkdownScrollViewer
   Markdown="{Binding MdText}"/>

To render Markdown dynamically from a ViewModel, use the Markdown property of the MarkdownScrollViewer with Avalonia data binding.

<md:MarkdownScrollViewer
   Markdown="{Binding MdText}"/>

To display rendered Markdown in an Avalonia application, use the MarkdownScrollViewer control. This control handles the display of the Markdown content, typically used in a way that allows for real-time updates or binding to a Markdown source string.

Review the demo source code to see the implementation details of how MarkdownScrollViewer is integrated and how to apply custom styling to the rendered output.

To render a .md file embedded in your project as an Avalonia resource, use the Source property of the MarkdownScrollViewer with the avares:// URI scheme.

<md:MarkdownScrollViewer
   Source="avares://YourAssemblyName/MdTxt/Test.md"/>

Markdown.Avalonia supports rendering images using standard Markdown syntax. You can display images from remote URLs, local file paths, or application resources.

Remote Images

Use standard Markdown image syntax with a URL: ![alt text](URL)

You can also include titles (tooltips) for images: ![alt text](URL "title")

Local and Resource Images

To display images stored within your project or on the local file system, provide the relative or absolute path:

• Local paths: ![alt text](path/to/image.png)
• Resource paths: ![alt text](Assets/image.png)

#### Remote images ####
![image1](http://placehold.it/300x25)  
![imageleft](http://placehold.it/150x25/0000FF "blue")![imageright](http://placehold.it/150x25/00FFFF "cyan")

#### Local and resource images ####
![localimage](Assets2/ResourceImage.png)
![ResourceImage](Assets/ResourceImage.png)

Ensure your version of AvaloniaUI is compatible with the version of Markdown.Avalonia you are using. Use the following compatibility mapping: