一款基于 WPF 开源、轻量级的 Markdown 编辑器引言为什么需要轻量级 Markdown 编辑器在日常开发和技术写作中Markdown 已成为最流行的轻量级标记语言。无论是写文档、记笔记还是维护项目 README一款好用的 Markdown 编辑器能极大提升效率。然而许多现有编辑器要么过于臃肿如 VS Code 需要加载大量扩展要么功能单一如纯文本编辑器缺乏实时预览。今天我们将从全栈实战角度基于 WPF 框架打造一款开源、轻量级的 Markdown 编辑器它具备实时预览、语法高亮、自定义样式等核心功能。## 项目架构与技术选型### 核心依赖-WPFWindows Presentation Foundation用于构建桌面 UI支持 XAML 绑定和丰富的控件库。-Markdig一个高性能的 .NET Markdown 解析库支持扩展语法如表格、脚注。-AvalonEdit开源文本编辑器控件支持语法高亮和代码折叠。-Newtonsoft.Json用于保存用户配置如主题、字体大小。### 项目结构MarkdownEditor/├── MainWindow.xaml # 主界面布局├── MainWindow.xaml.cs # 主逻辑├── Services/│ ├── MarkdownService.cs # Markdown 解析与渲染│ └── ConfigService.cs # 配置管理├── Models/│ └── EditorConfig.cs # 配置模型└── Themes/ # 自定义样式## 实战代码构建核心编辑器### 1. 界面布局XAML主界面采用两栏布局左侧为编辑区AvalonEdit右侧为预览区WebView2 或自定义渲染。我们使用Grid和Splitter实现可调整大小。xml!-- MainWindow.xaml --Window x:ClassMarkdownEditor.MainWindow xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:avalonedithttp://icsharpcode.net/sharpdevelop/avalonedit Title轻量级 Markdown 编辑器 Height600 Width1000 Grid Grid.ColumnDefinitions ColumnDefinition Width2*/ ColumnDefinition WidthAuto/ ColumnDefinition Width3*/ /Grid.ColumnDefinitions !-- 左侧编辑区 -- avalonedit:TextEditor x:NameEditor Grid.Column0 FontFamilyConsolas FontSize14 ShowLineNumbersTrue SyntaxHighlightingMarkdown TextChangedEditor_TextChanged/ !-- 分隔条 -- GridSplitter Grid.Column1 Width5 BackgroundGray HorizontalAlignmentCenter VerticalAlignmentStretch/ !-- 右侧预览区 -- ScrollViewer Grid.Column2 Background#1E1E1E WebBrowser x:NamePreviewBrowser / /ScrollViewer /Grid/Window注释 -avalonedit:TextEditor是开源控件直接支持 Markdown 语法高亮。 -WebBrowser用于显示 HTML 渲染结果我们通过Markdig将 Markdown 转为 HTML。 -GridSplitter允许用户拖动调整编辑区与预览区尺寸。### 2. 核心逻辑实时预览实现当用户在编辑区输入时触发TextChanged事件后台实时解析并更新预览。csharp// MainWindow.xaml.csusing Markdig; // Markdown 解析库using System.Text;using System.Windows;namespace MarkdownEditor{ public partial class MainWindow : Window { private MarkdownPipeline _pipeline; // Markdig 管道支持扩展语法 public MainWindow() { InitializeComponent(); // 配置 Markdig 管道启用表格、脚注等扩展 _pipeline new MarkdownPipelineBuilder() .UseAdvancedExtensions() // 启用表格、脚注、任务列表等 .Build(); } // 编辑区文本变化时触发 private void Editor_TextChanged(object sender, EventArgs e) { string markdownText Editor.Text; // 获取用户输入的 Markdown 文本 string htmlContent Markdown.ToHtml(markdownText, _pipeline); // 转为 HTML RenderPreview(htmlContent); // 更新预览 } // 将 HTML 渲染到 WebBrowser 控件 private void RenderPreview(string htmlContent) { // 构建完整 HTML 页面包含 CSS 样式 string fullHtml $ html head style body {{ font-family: Segoe UI, Arial; padding: 20px; color: #CCCCCC; background: #1E1E1E; }} h1, h2, h3 {{ color: #569CD6; }} code {{ background: #2D2D2D; padding: 2px 6px; border-radius: 3px; }} pre {{ background: #2D2D2D; padding: 10px; border-radius: 5px; }} blockquote {{ border-left: 4px solid #569CD6; padding-left: 10px; color: #AAAAAA; }} /style /head body{htmlContent}/body /html; // 加载 HTML 到 WebBrowser PreviewBrowser.NavigateToString(fullHtml); } }}注释 -MarkdownPipeline可扩展语法此处启用UseAdvancedExtensions()支持表格、任务列表、脚注等。 -RenderPreview方法动态构建 HTML 页面加入深色主题 CSS使预览区风格统一。 -WebBrowser.NavigateToString直接加载 HTML 字符串无需临时文件。### 3. 配置文件管理JSON 持久化用户可能希望调整字体大小、主题颜色等。我们使用 JSON 文件保存配置。csharp// Models/EditorConfig.cspublic class EditorConfig{ public int FontSize { get; set; } 14; public string Theme { get; set; } Dark; public bool ShowLineNumbers { get; set; } true;}// Services/ConfigService.csusing Newtonsoft.Json;using System.IO;public class ConfigService{ private readonly string _configPath editor_config.json; public EditorConfig LoadConfig() { if (File.Exists(_configPath)) { string json File.ReadAllText(_configPath); return JsonConvert.DeserializeObjectEditorConfig(json); } return new EditorConfig(); // 默认配置 } public void SaveConfig(EditorConfig config) { string json JsonConvert.SerializeObject(config, Formatting.Indented); File.WriteAllText(_configPath, json); }}示例用法在MainWindow构造函数中加载配置csharppublic MainWindow(){ InitializeComponent(); var configService new ConfigService(); var config configService.LoadConfig(); Editor.FontSize config.FontSize; // 应用其他配置...}## 扩展功能与优化### 1. 搜索与替换利用 AvalonEdit 内置的搜索功能csharp// 在菜单栏添加搜索功能private void SearchCommand_Executed(object sender, ExecutedRoutedEventArgs e){ var searchPanel SearchPanel.Install(Editor); searchPanel.Open();}### 2. 导出为 PDF使用itext7或PuppeteerSharp将 HTML 转换为 PDFcsharp// 伪代码示例private async void ExportPdf(){ string html GetPreviewHtml(); var pdfBytes await HtmlToPdfConverter.ConvertAsync(html); File.WriteAllBytes(output.pdf, pdfBytes);}### 3. 语法检查扩展集成Markdownlint规则通过正则检查常见错误如未闭合的链接csharppublic Liststring ValidateMarkdown(string text){ var errors new Liststring(); // 检查未闭合的图片标签 if (Regex.IsMatch(text, !\[.*?\]\(.*?[^\)]$)) errors.Add(图片链接未闭合); return errors;}## 总结本文从零开始构建了一款基于 WPF 的开源 Markdown 编辑器核心功能包括-实时预览借助 Markdig 库实现毫秒级 Markdown 到 HTML 转换。-可扩展性通过MarkdownPipeline支持表格、脚注等高级语法。-轻量级仅依赖三个 NuGet 包Markdig、AvalonEdit、Newtonsoft.Json安装包体积小于 10MB。-配置持久化使用 JSON 文件保存用户偏好支持热加载。通过实战代码演示我们展示了如何用 WPF 快速搭建具有专业水准的文本编辑器。该编辑器适合作为学习项目或日常工具其开源架构允许开发者自由添加自定义功能如 LaTeX 公式、流程图支持。如果你追求极简主义且需要高效写作这款编辑器将是理想选择。