LiveMarkdown.Avalonia is a High-performance Markdown viewer for Avalonia applications. It supports real-time rendering of Markdown content, so it's ideal for applications that require dynamic text updating, especially when streaming large model outputs.

• 🚀 High-performance rendering powered by Markdig
• 🔄 Real-time updates: Automatically re-renders changes in Markdown content
• 🎨 Customizable styles: Easily style Markdown elements using Avalonia's powerful styling system
• 🔗 Hyperlink support: Clickable links with customizable behavior
• 📊 Table support: Render tables with proper formatting
• 📜 Code block syntax highlighting: Supports multiple languages with ColorCode
• 🖼️ Image support: Load online, local even avares images asynchronously
• ✍️ Selectable text: Text can be selected across different Markdown elements

• Basic Markdown rendering
• Real-time updates
• Hyperlink support
• Table support
• Code block syntax highlighting
• Image support
  • Bitmap
  • SVG
  • Online images
  • Local images
  • avares images
• Selectable text across elements
• LaTeX support
• HTML rendering

You can install the latest version from NuGet CLI:

dotnet add package LiveMarkdown.Avalonia

or use the NuGet Package Manager in your IDE.

<Application
  x:Class="YourAppClass" xmlns="https://github.com/avaloniaui"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" RequestedThemeVariant="Default">

  <Application.Styles>
    <!-- Your other styles here -->
    <StyleInclude Source="avares://LiveMarkdown.Avalonia/Styles.axaml"/>
  </Application.Styles>

  <Application.Resources>
    <!-- Your other resources here -->
    <Color x:Key="BorderColor">#3DFFFFFF</Color>
    <Color x:Key="ForegroundColor">#FFFFFF</Color>
    <Color x:Key="CardBackgroundColor">#15000000</Color>
    <Color x:Key="SecondaryCardBackgroundColor">#99000000</Color>
  </Application.Resources>
</Application>

Add the MarkdownRenderer control to your .axaml file:

<YourControl
  xmlns:md="clr-namespace:LiveMarkdown.Avalonia;assembly=LiveMarkdown.Avalonia">
  <md:MarkdownRenderer x:Name="MarkdownRenderer"/>
</YourControl>

Then you can manage the Markdown content in your code-behind:

// ObservableStringBuilder is used for efficient string updates
var markdownBuilder = new ObservableStringBuilder();
MarkdownRenderer.MarkdownBuilder = markdownBuilder;

// Append Markdown content, this will trigger re-rendering
markdownBuilder.Append("# Hello, Markdown!");
markdownBuilder.Append("\n\nThis is a **live** Markdown viewer for Avalonia applications.");

// Clear the content
markdownBuilder.Clear();

If you want to load local images with relative paths, you can set the MarkdownRenderer.ImageBasePath property.

Markdown elements can be styled using Avalonia's powerful styling system. You can override the default styles by defining your own styles in your application styles.

Avalonia Styling Docs:

• Avalonia Styles
• Style selector syntax

• Q: Why some emojis not rendered correctly (rendered in single color)?
• A: This is a known issue caused by Skia (the render backend of Avalonia). You can upgrade SkiaSharp version (e.g. >= 3.117.0) to fix this. Related issue

We welcome issues, feature ideas, and PRs! See CONTRIBUTING.md for guidelines.

Distributed under the Apache 2.0 License. See LICENSE for more information.

• markdig - BSD-2-Clause License
  • Markdown parser for Everywhere.Markdown rendering
  • Source repo: https://github.com/xoofx/markdig
• Svg.Skia - MIT License
  • Svg rendering for images
  • Source repo: https://github.com/wieslawsoltes/Svg.Skia
• ColorCode - MIT License
  • Syntax highlighting for code blocks
  • Source repo: https://github.com/CommunityToolkit/ColorCode-Universal