# 高颜值Markdown编辑器+社交平台发布器Modern MD Editor

*Published:* 2026-03-03
*Author:* 客服001

Modern MD Editor 是一款面向创作者与内容团队的「高颜值 [Markdown](https://www.xarjtc.com/tag/markdown "查看Markdown此标签更多文章") 编辑器 + 社交平台发布器」。它以极致的界面与交互为基础，提供所见即所得的实时预览与多端视口切换，并通过一键复制将 Markdown 转为适配微信公众号/社交平台的高保真富文本（自动内联样式、字体/行高/字距与主题化适配），让创作到发布的最后一步变得优雅、高效、可控。

[![](https://www.xarjtc.com/wp-content/uploads/2026/03/165ca49b205b27e.webp)](https://www.xarjtc.com/wp-content/uploads/2026/03/165ca49b205b27e.webp)

项目特性

所见即所得预览与编辑（WYSIWYG）：  
新增「可编辑模式」：点击顶部「视图切换」中的「所见即所得（可编辑）」按钮进入富文本所见即所得编辑；再次点击可切回「编辑器」或「编辑 + 预览」。  
基于 Milkdown（preset-commonmark + preset-gfm）与 Prism 高亮，并与 Markdown 文本双向同步。  
支持 Mermaid 节点视图；表格内反引号在少数场景做了兼容处理，确保展示与复制兼容。  
保持与主题/代码样式/排版系统一致。  
预览视口一键切换：桌面 / 平板 / 手机。  
LaTeX 数学公式支持：  
行内公式：使用单美元符 $E=mc^2$ 包裹。  
块级公式：使用双美元符 $$..$$ 包裹，支持跨行。  
基于 MathJax 3 渲染为 SVG，确保微信公众号完美兼容。  
复制到公众号时自动处理公式样式，无需额外调整。  
一键复制为公众号/社交平台格式：  
自动注入内联样式（字体、字号、行高、字距、配色）。  
主题化适配与细节增强（标题、列表、引用、代码、表格等）。  
现代 Clipboard API 优先，失败时自动降级，增强兼容性。  
强大的主题与排版系统：  
颜色主题（含自定义主题色实时预览与持久化）。  
代码样式（背景/字体/高亮变量一站式应用）。  
排版主题系统（布局、间距、圆角、阴影等 CSS 变量）。  
可调字体与阅读体验：  
字体族、字号、行高、字距皆可在设置面板中直观调节。  
现代前端架构：  
基于 Vue 3 + Vite 5 + CodeMirror 6。  
主题预加载（避免 FOUC）、性能防抖与缓存、模块化可扩展设计。  
技术栈与架构  
核心框架  
Vue 3：组件化与响应式核心，使用 <script setup> 与组合式 API 实现清晰的 UI 与状态管理。  
Vite 5：极速开发服务器与构建工具，HMR 体验优秀，使用官方插件 @vitejs/plugin-vue 处理 .vue。  
编辑器  
CodeMirror 6：提供高性能文本编辑、快捷键与滚动事件。在 src/composables/editor/ 封装编辑器的生命周期、操作与状态。  
所见即所得（Milkdown）：基于 @milkdown/core、preset-commonmark、preset-gfm、plugin-prism、plugin-history、plugin-clipboard 与自定义 Mermaid NodeView；组件：src/components/WysiwygPane.vue。  
Markdown 渲染管线  
src/core/markdown/parser.js：单文件解析入口，顺序处理代码块/列表/表格/引用/标题/段落；PreviewPane.vue 调用 parseMarkdown 生成预览版与社交版 HTML。  
src/core/markdown/inline-formatter.js：行内语法处理（加粗/斜体/链接/图片/转义等）。  
src/core/markdown/code-formatter.js：代码块高亮与渲染（含 Mermaid 特判与社交复制样式）。  
src/core/markdown/social-adapters.js：社交平台适配与内联样式注入，提供可注册的主题适配器。  
复制链路  
src/core/editor/copy-formats.js：一键生成社交版/Markdown 两种复制格式。  
src/core/editor/clipboard.js：Clipboard API 优先，失败降级到 execCommand；模拟社交平台容器，处理字体/行高/字距等细节。  
主题系统  
src/core/theme/manager.js：集中管理并写入 CSS 变量；src/core/theme/loader.js 首屏预注入，避免 FOUC；src/styles/themes/\* 为样式基线，预设数据在 src/config/theme-presets.js。  
样式基线  
github-markdown-css：为 Markdown 预览提供一致的基础排版，结合自定义 CSS 变量与主题系统统一风格。  
测试体系  
Vitest + @vue/test-utils + jsdom：脚本：test、test:ui、test:coverage。  
目录分层  
components/（UI） · composables/（复用逻辑） · core/（编辑器/解析/主题/复制） · config/（常量与工具栏） · shared/（公共工具函数） · styles/（全局与组件样式）。  
环境要求  
Node.js：≥ 18（推荐 18/20 LTS）  
桌面应用支持  
这个项目现在支持 Electron 桌面应用！你可以：

🚀 快速启动: npm run electron:dev - 同时启动开发服务器和桌面应用  
📱 原生体验: 享受完整的桌面应用体验，包括菜单栏、快捷键等  
💾 本地文件: 支持本地文件的打开、编辑、保存等操作  
🔧 跨平台: 支持 macOS、Windows 和 Linux  
桌面应用功能  
文件操作: 打开文件（支持 .md、.markdown、.txt 等格式）、保存文件  
快捷键: Cmd/Ctrl+O（打开）、Cmd/Ctrl+S（保存）  
菜单栏: 完整的应用菜单（文件、编辑、视图、帮助）  
窗口管理: 支持调整大小、全屏等  
日志记录: 详细的操作日志，便于调试和了解应用状态

GitHub地址：https://github.com/xiaobox/mdeditor