AvalonMarkdown 3.0.0

AvalonMarkdown

跨平台 Markdown 预览控件，基于 AvaloniaUI + NativeWebView。 写一次控件，运行于 Desktop (WebView2) / Browser (WASM) / Android / iOS。

安装

dotnet add package AvalonMarkdown

快速开始

1. 在 XAML 中声明

<Window xmlns="https://github.com/avaloniaui"
        xmlns:md="clr-namespace:AvalonMarkdown.Views;assembly=AvalonMarkdown">
    <md:MarkdownView x:Name="Preview" />
</Window>

2. 在代码中渲染

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        Preview.OnReady += async (_, _) =>
        {
            await Preview.RenderMarkdownAsync("# Hello World\n\n**Bold** *Italic*");
        };
    }
}

API 参考

方法

事件

错误事件参数

渲染能力

• Markdown — markdown-it 14 + footnote / task-lists
• 数学公式 — KaTeX（行内 $...$ / 块级 $$...$$）
• 代码高亮 — highlight.js 11，VS Code 风格配色
• 图表 — Mermaid 11（流程图、时序图、饼图、Git 图、类图）
• PlantUML — 通过 plantuml-encoder 编码后调用 PlantUML 在线服务渲染 SVG，自动适配深色/浅色主题
• 视频嵌入 — 支持直接视频文件（.mp4 / .webm / .ogg / .mov 等）和平台 URL 自动识别
  • YouTube — youtube.com/watch?v=ID / youtu.be/ID → 响应式 iframe 嵌入
  • Bilibili — bilibili.com/video/BVxxx → 响应式 iframe 嵌入
  • Vimeo — vimeo.com/ID → 响应式 iframe 嵌入
• 代码块 — 语言标签 · 复制按钮 · 高度调节
• 任务列表 — 自定义复选框
• **脚注 / 表格 / 引用 / 删除线 / 上下标

跨平台架构

┌─────────────────────────────────────────────────────────┐
│                    MarkdownView 控件                      │
│   (Avalonia UserControl + NativeWebView)                 │
├─────────┬──────────┬───────────┬────────────┬────────────┤
│ Desktop │ Browser  │  Android  │    iOS     │  未来平台   │
│ WebView2 │ WASM     │ WebView   │ WKWebView  │           │
│ file://  │ about:   │ data:     │ data:      │           │
│ 临时文件 │ blank +  │ base64    │ base64     │           │
│         │ doc.write │           │            │           │
└─────────┴──────────┴───────────┴────────────┴────────────┘

加载策略：

• Desktop — 写临时 HTML 文件 → file:/// 导航（CDN 脚本完整执行）
• Browser (WASM) — about:blank → document.write 注入（兼容 WASM iframe）
• Android / iOS — data:text/html;base64 直接加载（无需 JavaScript 注入）

主题系统

支持自动跟随系统主题（Light / Dark），所有活动实例响应式同步：

// 系统主题变化时自动推送
// 1. C# 端：WebViewHost / NativeWebView 背景色
// 2. JS 端：setTheme('light'|'dark') 切换 CSS class + Mermaid 主题

依赖

所有 JS/CSS 依赖通过 EmbeddedHtmlSourceProvider 在构建时内联到 HTML， 无需网络连接，仅 KaTeX CSS 字体与 PlantUML SVG 渲染需在线服务。

许可证

MIT © Axvser