StreamMark 入门：从 NuGet 安装到 Avalonia 原生流式 Markdown 渲染

在 Avalonia 中显示 Markdown，最简单的需求是把一段字符串渲染出来。但如果字符串来自 AI，一次只到达几个字，还会包含代码、表格、公式和图表，接入方式就需要多考虑一步：如何持续追加内容，以及如何组织越来越长的对话。

StreamMark 是面向这类场景的 Avalonia 原生 Markdown 渲染库，不需要 WebView。本文从安装 NuGet 开始，先完成单篇文档显示，再接入流式输出和可选扩展。

本文由 AI 辅助整理，并基于项目源码和发布包核对。使用截至 2026 年 10 月 19 日已发布的 0.1.0-alpha.22，对应 .NET 10 与 Avalonia 12.1.3。它仍是预览版本，建议固定版本再接入。下文的 C# 接入 API 已通过发布包编译验证；配图是 TKCode 中实际集成 StreamMark 的 Headless + Skia 渲染截图，用于展示效果，并非下面最小程序的运行截图。

图 1：原生界面中的混合 Markdown 内容。公式、语法高亮和图表分别需要对应扩展包。

1. 准备 Avalonia 项目

准备 .NET 10 SDK。如果还没有 Avalonia 项目，可以先安装模板，再创建一个基础桌面项目：

dotnet new install Avalonia.Templates --version 12.1.3

dotnet new avalonia -n StreamMarkStarter

cd StreamMarkStarter

已有项目可以跳过创建步骤。确认目标框架为 net10.0，Avalonia 相关包统一使用 12.1.3，包括 Avalonia.Desktop、Avalonia.Themes.Fluent 及模板中启用的其他 Avalonia 包。不要只升级其中一个包，留下混用的大版本。

StreamMark 当前面向桌面应用。这里的示例使用 Fluent 主题，不要求安装 AtomUI。

2. 从 NuGet 安装 StreamMark

只显示普通 Markdown，先安装这一个包即可：

dotnet add package TKCode.StreamMark.Avalonia --version 0.1.0-alpha.22

注意两个名称的区别：NuGet 包名带有 TKCode. 前缀，但程序集和 C# 命名空间仍是 StreamMark.*。例如代码中使用的是 using StreamMark.Avalonia;。

需要更丰富的内容时，再安装对应扩展：

dotnet add package TKCode.StreamMark.Highlighting.TextMate --version 0.1.0-alpha.22

dotnet add package TKCode.StreamMark.RaTeX --version 0.1.0-alpha.22

dotnet add package TKCode.StreamMark.Mermaid --version 0.1.0-alpha.22

包	用途
TKCode.StreamMark.Avalonia	Markdown 控件、默认主题；自动依赖 Core
TKCode.StreamMark.Highlighting.TextMate	代码语法高亮
TKCode.StreamMark.RaTeX	LaTeX 公式
TKCode.StreamMark.Mermaid	Mermaid 图表
TKCode.StreamMark.Theme.AtomUI	已使用 AtomUI 的宿主应用进行主题映射

 

这里显式指定预览版本，不依赖 NuGet 客户端默认是否搜索预发行版。所有 StreamMark 扩展建议使用相同版本。

3. 在 App 中注册主题

打开 App.axaml，保留模板原有的 Fluent 主题，并在后面加入 StreamMark 主题：

<Application xmlns="https://github.com/avaloniaui"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:sm="clr-namespace:StreamMark.Avalonia.Themes;assembly=StreamMark.Avalonia"

x:Class="StreamMarkStarter.App"

RequestedThemeVariant="Dark">

<Application.Styles>

<FluentTheme />

<sm:StreamMarkTheme />

</Application.Styles>

</Application>

x:Class 请与自己的项目命名空间保持一致。也可以在 App.Initialize() 中用 C# 注册，但不要和 XAML 重复添加：

Styles.Add(new StreamMark.Avalonia.Themes.StreamMarkTheme());

这里设置深色仅为演示；可以改为 Light 或使用系统主题。Fluent 等宿主主题提供常规控件模板，StreamMark 主题提供 Markdown 内容使用的资源，两者职责不同。

4. 显示第一篇 Markdown

将模板的 MainWindow.axaml 简化为：

<Window xmlns="https://github.com/avaloniaui"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

x:Class="StreamMarkStarter.MainWindow"

Title="StreamMark 入门"

Width="960"Height="720" />

然后修改 MainWindow.axaml.cs。这一版只依赖基础包：

using Avalonia;

using Avalonia.Controls;

using Avalonia.Layout;

using StreamMark.Avalonia;

using StreamMark.Avalonia.Extensions;

 

namespace StreamMarkStarter;

 

public partial class MainWindow : Window

{

privatereadonly MarkdownServices _services = new();

privatereadonly MarkdownView _view = new();

 

public MainWindow()

{

InitializeComponent();

 

// 先设置服务，再设置 Markdown。

MarkdownServices.SetServices(_view, _services);

_view.Markdown = """

# Hello StreamMark

 

这是运行在 **Avalonia 原生控件** 中的 Markdown。

 

- 支持标题、段落和列表

- 可以选择、复制文字

- 接下来接入流式输出

 

| 项目 | 状态 |

| --- | --- |

| NuGet 安装 | 完成 |

| Avalonia 接入 | 完成 |

""";

 

Content = new ScrollViewer

{

Content = new Border

{

MaxWidth = 820,

Padding = new Thickness(28),

HorizontalAlignment = HorizontalAlignment.Stretch,

Child = _view

}

};

}

}

运行：

dotnet run

此时可以看到标题、列表和表格。MarkdownView 的高度会随文档增长，因此单篇文档通常由外层 ScrollViewer 提供滚动；MaxWidth 是为了控制阅读宽度。

5. 加入代码高亮、公式和 Mermaid

安装扩展包后，还需要注册插件。把上面的 _services 字段替换为：

private readonly MarkdownServices _services = new()

{

Plugins =

[

new StreamMark.Highlighting.TextMate.TextMatePlugin(),

new StreamMark.RaTeX.RaTeXPlugin(),

new StreamMark.Mermaid.MermaidPlugin()

]

};

然后把 _view.Markdown 替换为下面的内容：