LiveMarkdown.Avalonia.Mermaid 2.0.0-rc1

<div align="center">

<img src="https://raw.githubusercontent.com/DearVa/LiveMarkdown.Avalonia/main/img/icon-large.png" alt="LiveMarkdown.Avalonia Logo" width="128" height="128" />

<h1>LiveMarkdown.Avalonia</h1>

High performance, real-time markdown renderer for AI/LLM

<p align="center"> <a href="https://deepwiki.com/DearVa/LiveMarkdown.Avalonia"><img src="https://deepwiki.com/badge.svg" alt="Ask DeepWiki"></a> <a href="https://www.nuget.org/packages/LiveMarkdown.Avalonia/"><img src="https://img.shields.io/nuget/v/LiveMarkdown.Avalonia.svg?style=flat-square" alt="NuGet"></a> <a href="https://docs.microsoft.com/en-us/dotnet/standard/net-standard"><img src="https://img.shields.io/badge/netstandard-2.0-blue.svg?style=flat-square" alt="netstandard2.0"></a> <a href="https://avaloniaui.net/"><img src="https://img.shields.io/badge/Avalonia-11-blue.svg?style=flat-square" alt="Avalonia"></a> <a href="https://github.com/DearVa/LiveMarkdown.Avalonia/issues"><img src="https://img.shields.io/github/issues/DearVa/LiveMarkdown.Avalonia.svg?style=flat-square" alt="GitHub issues"></a> <a href="LICENSE"><img src="https://img.shields.io/badge/License-Apache%202.0-blue.svg?style=flat-square" alt="License"></a> </p>

<br/>

<img src="https://raw.githubusercontent.com/DearVa/LiveMarkdown.Avalonia/main/img/demo.gif" alt="LiveMarkdown.Avalonia Demo" width="800" />

</div>

<br/>

👋 Introduction

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.

⭐ Features

• 🚀 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
• 🔗 Link support: Clickable links with customizable behavior
• 📊 Table support: Render tables with proper formatting
• 📜 Code block syntax highlighting: Supports multiple languages with TextMateSharp
• 🖼️ Image support: Load online, local even avares images asynchronously
• ✍️ Selectable text: Text can be selected across different Markdown elements

❤️ Sponsor

This project is fully open-source and free. Your support will improve this project a lot. I sincerely thank all my sponsors!

<a href="https://www.buymeacoffee.com/artemisli"><img src="https://img.buymeacoffee.com/button-api/?text=Support%20%20Me&emoji=&slug=artemisli&button_colour=FFDD00&font_colour=000000&font_family=Comic&outline_colour=000000&coffee_colour=ffffff" alt="Buy me a coffee"/></a> <a href="https://afdian.com/a/DearVa"><img width="200" src="https://pic1.afdiancdn.com/static/img/welcome/button-sponsorme.png" alt="爱发电"></a> <a href="https://app.fossa.com/projects/git%2Bgithub.com%2FDearVa%2FLiveMarkdown.Avalonia?ref=badge_shield" alt="FOSSA Status"><img src="https://app.fossa.com/api/projects/git%2Bgithub.com%2FDearVa%2FLiveMarkdown.Avalonia.svg?type=shield"/></a>

✈️ Roadmap

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

🚀 Getting Started

1. Install the NuGet package

You can install the latest version from NuGet CLI:

dotnet add package LiveMarkdown.Avalonia

or use the NuGet Package Manager in your IDE.

2. Register the Markdown styles in your Avalonia application

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

  <Application.Styles>
    
    <StyleInclude Source="avares://LiveMarkdown.Avalonia/Styles.axaml"/>
  </Application.Styles>

  <Application.Resources>
    
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceInclude Source="avares://LiveMarkdown.Avalonia/Defaults.axaml"/>
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </Application.Resources>
</Application>

3. Use the MarkdownRenderer control in your XAML

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.

4. (Optional) Enable LaTeX rendering

LaTeX is supported via the LiveMarkdown.Avalonia.Math package. You can install it via NuGet:

dotnet add package LiveMarkdown.Avalonia.Math

Then register both the MathInlineNode and MathBlockNode before using LaTeX in your Markdown content (e.g. App.axaml.cs):

using LiveMarkdown.Avalonia;

MarkdownNode.Register<MathInlineNode>();
MarkdownNode.Register<MathBlockNode>(); // This is also required for block-level LaTeX support, e.g. $$...$$

5. (Optional) Enable SVG image rendering

SVG rendering is supported via the LiveMarkdown.Avalonia.Svg or LiveMarkdown.Avalonia.Svg.Skia package. You can install one of them via NuGet:

dotnet add package LiveMarkdown.Avalonia.Svg

or

dotnet add package LiveMarkdown.Avalonia.Svg.Skia

Then register the SvgImageDecoder into the AsyncImageLoader before using SVG images in your Markdown content (e.g. App.axaml.cs):

using LiveMarkdown.Avalonia;

AsyncImageLoader.DefaultDecoders =
[
    SvgImageDecoder.Shared,
    DefaultBitmapDecoder.Shared
];

You can also set the AsyncImageLoader.Decoders property on a per-renderer basis if you want different renderers to use different decoders.

6. (Optional) Enable Mermaid diagram rendering

Mermaid diagram rendering is supported via the LiveMarkdown.Avalonia.Mermaid package. You can install it via NuGet:

dotnet add package LiveMarkdown.Avalonia.Mermaid

Then register the MermaidDiagramNode before using Mermaid diagrams in your Markdown content (e.g. App.axaml.cs):

using LiveMarkdown.Avalonia;

MarkdownRenderer.ConfigurePipeline += x => x.UseMermaid();
MarkdownNode.Register<MermaidBlockNode>();

🪄 Style Customization

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

Customizing Resources

The <ResourceInclude Source="avares://LiveMarkdown.Avalonia/Defaults.axaml"/> line in your App.axaml imports the default resources used by the renderer. You can override these resources in your application to customize the look and feel.

Here are the available resource keys:

Code Block Theme

You can customize the syntax highlighting theme for code blocks. The default theme is DarkPlus.

Global Setting

To set the theme globally for a MarkdownRenderer instance, use the CodeBlockColorTheme property:

<md:MarkdownRenderer CodeBlockColorTheme="LightPlus"/>

Per-CodeBlock Setting via Styles

You can also use Avalonia styles to set the theme for specific code blocks or based on conditions:

<Style Selector="md|CodeBlock">
  <Setter Property="ColorTheme" Value="SolarizedDark"/>
</Style>

Supported themes are defined in TextMateSharp.Grammars.ThemeName.

Emphasis Styles

By default, the renderer implements the standard Markdown emphasis styles (e.g., *italic*, **bold**, ~~strikethrough~~) using simple font weight and style changes. If you want to customize these styles or extended styles like ==highlight==, you can define your own styles for the corresponding elements.

Here is a sample style definition that customizes the emphasis styles and adds support for subscript, superscript, underline and highlight. Note that the BaselineAlignment seems to be ignored in some cases due to Avalonia's text layout behavior.

<Style Selector="md|MarkdownRenderer">
  <Style Selector="^ Span.Emphasis">
    
    
    
    <Style Selector="^.Bold.Star">
      <Setter Property="FontWeight" Value="Bold"/>
    </Style>
    <Style Selector="^.Bold.Underscore">
      <Setter Property="FontWeight" Value="Normal"/>
    </Style>

    
    <Style Selector="^.Subscript">
      <Setter Property="BaselineAlignment" Value="Subscript"/>
      <Setter Property="FontSize" Value="8"/>
    </Style>
    <Style Selector="^.Superscript">
      <Setter Property="BaselineAlignment" Value="Superscript"/>
      <Setter Property="FontSize" Value="8"/>
    </Style>
    <Style Selector="^.Underline">
      <Setter Property="TextDecorations" Value="Underline"/>
    </Style>
    <Style Selector="^.Highlight">
      <Setter Property="Background" Value="DarkOrange"/>
    </Style>
  </Style>
</Style>

🤔 FAQ

• 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

🤝 Contributing

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

📄 License

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

Third-Party Licenses

• 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
• TextMateSharp - MIT License
  • Syntax highlighting for code blocks
  • Source repo: https://github.com/danipen/TextMateSharp
• CSharpMath - MIT License
  • LaTeX rendering support
  • Source repo: https://github.com/verybadcat/CSharpMath
• Mermaider - MIT License
  • LA pure dotnet mermaid parser, layout engine AND renderer, no js runtime, AOT ready.
  • Source repo: https://github.com/nullean/mermaider