Modern MD Editor：一键复制公众号格式的高颜值 Markdown 编辑器（支持桌面应用）

Modern MD Editor概览

Modern MD Editor 是一款面向创作者与内容团队的现代化 Markdown 工具，集「所见即所得编辑 + 实时预览 + 一键复制为公众号/社交平台高保真富文本」于一体。界面精致，交互顺滑，支持桌面/平板/手机视口切换，并在复制时自动内联样式，实现字体、行高、字距与主题的统一，降低排版走样风险。

Modern MD Editor核心特点

• 一键复制为微信公众号/社交平台可用的 HTML，高保真还原排版
• 所见即所得与 Markdown 文本双向同步，预览与编辑统一体验
• 主题、代码样式与排版系统可视化可调，快速获得品牌一致性
• 预览视口一键切换，创作阶段即可感知多端效果
• 现代 Clipboard API 优先，失败时自动降级，提升兼容性
• 主题预加载避免闪烁（FOUC），结合防抖与缓存优化性能

Modern MD Editor主要功能

所见即所得与多视图

• 提供「可编辑模式」富文本所见即所得；可在「编辑器」「编辑 + 预览」与「所见即所得」之间切换
• 预览窗口支持桌面、平板、手机视口，一步核对多端呈现

一键复制为公众号/社交平台格式

• 自动注入内联样式：字体、字号、行高、字距、配色
• 标题、列表、引用、代码、表格等细节做了主题化增强与适配

Markdown/语法与高亮

• 基于 Milkdown（preset-commonmark + preset-gfm）
• Prism 代码高亮，样式与主题系统保持一致
• 支持 Mermaid 节点视图；表格内反引号在少数场景下做兼容处理
• 与 Markdown 文本双向同步，减少格式不一致

主题与排版系统

• 颜色主题含自定义主题色，实时预览并持久化
• 代码样式可统一设置背景、字体与高亮变量
• 排版主题以 CSS 变量管理布局、间距、圆角、阴影
• 字体族、字号、行高、字距可在设置面板直观调节

兼容性与性能

• 现代 Clipboard API 优先，失败自动降级
• 主题预加载避免样式闪烁
• 性能防抖、缓存与模块化可扩展设计

桌面应用（Electron）

• 快速启动：npm run electron:dev 同时启动开发服务器与桌面应用
• 跨平台：macOS / Windows / Linux
• 本地文件：打开与保存本地 .md、.markdown、.txt 等格式
• 快捷键：Cmd/Ctrl+O（打开）、Cmd/Ctrl+S（保存）
• 应用菜单：文件、编辑、视图、帮助；支持窗口大小调整与全屏
• 记录详细操作日志，便于调试与排错

技术栈

• 前端：Vue 3 + Vite 5 + CodeMirror 6
• Markdown/高亮：Milkdown + Prism
• 桌面端：Electron

适用场景

• 需要将 Markdown 稿件稳定输出为微信公众号与多社交平台格式的内容团队
• 关注品牌一致性与阅读体验的创作者
• 希望在创作期就锁定排版与多端呈现的个人或团队

Modern MD Editor获取方式

官网：https://mmdeditor.boxtech.icu/

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

原文链接：https://www.ahhhhfs.com/76411/