用 Markdown 写作的人最后都会撞上同一件事：正文写得很顺，但交付环节很难受。粘进公众号编辑器样式全没了，发给同事要 Word 版，博客要 HTML，群里的人只想看图。这一步没走好，写作省下的时间会在排版上全部还回去。
这篇按「写、粘、导」三个环节讲清楚每一步的实现方式和限制，最后给出按目标选路径的建议。三个工具都在浏览器本地处理，文档不会上传服务器。
一、写的环节：实时预览编辑器怎么用
Markdown 编辑预览是左右分栏结构，左边源文、右边渲染结果。支持 GitHub 风格扩展语法，也就是标准 Markdown 之外还认表格、任务列表、删除线、围栏代码块和自动链接——这四项是日常写文档最常用的扩展，很多简易预览器不支持，导致本地写得好好的，换个环境就散架。
有三个功能真正影响效率：
- 工具栏会智能处理选区。选中一段文字再点加粗，是把选区包起来而不是在光标处插一对星号；选中多行再点无序列表，是给每一行都加前缀。这比手打符号快，也不容易漏掉配对。
- 预览带文档大纲。点大纲里的标题能跳到源文对应位置，写长文时靠这个定位比拖滚动条快得多。
- 滚动按比例双向同步。开启后左右两侧对照着看，校对时省心；但如果文中有超长代码块，两侧高度差异大，比例同步会有偏移，这时关掉更舒服。
输出方式有四种：导出 .md 源文、导出带样式的独立 HTML 文件、复制 HTML 源码、复制纯文本。导出的 HTML 是自带样式的单文件，直接双击就能在浏览器里打开，适合发给不用 Markdown 的人预览。
安全上有一点值得说明：Markdown 允许内嵌 HTML，工具在渲染前会按白名单清洗，脚本标签和危险属性会被移除。所以如果你在正文里写了 <script> 或者带 onclick 的标签，预览里不会生效，这是有意为之，不是渲染出错。
二、粘的环节：样式为什么一粘就丢
公众号编辑器、Word、邮件客户端都不认识 Markdown，也不认识 CSS 类名和外链样式表。你从网页上复制一段渲染好的内容粘进去，样式来自 <style> 块或 class，粘贴时这两样都被剥离，剩下的就是一堆没格式的纯文字加几个加粗。
Markdown 转富文本解决的就是这件事：它把样式全部写进每个标签的 style 属性里，也就是内联样式，这是上述编辑器唯一可靠识别的形式。标题、引用、代码块、表格、列表、分割线都会带上对应的内联样式，复制过去原样保留。
工具提供三套主题——公众号简约、正式文档、暖色阅读，主题色、正文字号、行高都能单独调。选主题的依据不是好看，而是目标平台的阅读环境：公众号在手机上看，需要大字号大行高；正式文档要发给客户，字号偏小、层级清晰更合适。
复制这一步的机制也值得知道：工具优先用剪贴板接口写入 text/html 格式，这样粘贴时才会保留格式；浏览器不支持或权限不允许时，自动降级为「选中预览区 + 系统复制」的老办法，并给出手动复制提示。看到提示不要重复点，直接按提示选中预览区按 Ctrl+C 更快。
各平台的实际表现差别不小：
- 微信公众号：标题、加粗、列表、引用、表格都能保留。外链图片不显示，微信要求图片先进素材库，必须在编辑器里重新上传插入。
- Word / WPS：样式完整保留且可继续编辑，粘贴时记得选「保留源格式」，选「只保留文本」会白做一遍。
- 知乎 / 掘金：基本保留，但平台会用自己的样式覆盖一部分。这两个平台本身支持 Markdown，直接粘源码反而更干净。
- 飞书 / 钉钉文档：标题与列表保留，代码块可能被转成普通段落，代码多的内容粘完要检查。
- 邮件客户端：内联样式保留，但部分客户端会剥掉背景色，依赖底色区分的代码块和高亮块会变得不明显。
三、导的环节：转 Word 时结构是怎么映射的
Markdown转Word的路径是两段式：先用解析器把 Markdown 变成 HTML，再把 HTML 映射成 Word 的底层标记（WordprocessingML）并打包成 .docx。理解这条链路，就能预判什么会保留、什么会丢。
保留下来的部分：
- 一到六级标题映射成 Word 的标题样式，并带正确的大纲级别。这一点是关键——大纲级别正确，Word 的导航窗格和「插入自动目录」才能直接用，不用手工设级别。
- 有序与无序列表（含嵌套）映射成 Word 的列表段落，缩进层级跟着 Markdown 的缩进走。所以源文里嵌套缩进不规范（两个空格和四个空格混用），到 Word 里层级就会乱，写的时候统一缩进是有意义的。
- 加粗、斜体、下划线、行内代码保留为字符格式，行内代码会用等宽字体。
- 引用块、代码块（等宽字体加浅灰底）、分割线都有对应映射。
- 表格首行自动加粗当表头。
会丢的部分要提前知道：
- 图片会变成
[图片：说明]占位文字。原因是把图片真正写进 docx 需要拿到图片的二进制内容并在文档内部建立关联关系，而外链图片还会遇到跨域限制，浏览器里拿不到数据。所以带图的稿子转 Word 后，需要在 Word 里手动插入图片，占位文字正好告诉你插在哪。 - 表格只保留单元格文字，合并单元格和单元格内的行内样式不保留。复杂表格建议在 Word 里重做，或者干脆拆成多个简单表格。
输入不限于 Markdown：可以直接粘 HTML 片段进来转换，也能导入本地的 .md、.txt、.html 文件。文档标题会写进 docx 的文档属性，可以勾选「自动取第一个一级标题」省一步。转换后先看块统计，标题数、列表数、表格数和你预期的一致，再下载。
产物是标准 docx，Word、WPS、Pages、Google Docs 都能打开继续编辑。
四、图片与代码块：最容易翻车的两块
图片的三个坑串起来看就清楚了：本地相对路径的图片，换台机器就打不开；外链图片粘进公众号不显示；转 Word 会变成占位文字。三种落地方式没有一种能自动带上图片，这是各平台的限制，不是转换环节偷懒。
绕开的办法是把整篇导出成长图。编辑器和转富文本工具都提供预览区导出 PNG 长图，宽度可选 750 px（手机分享）或 1080 px（高清），也能自定义 320 到 2400 px 之间的值。图文一体，发群、发朋友圈、当截图附件都合适。这里有三个已知边界：
- canvas 有最大像素面积限制。长文档乘高倍率会超限，超限后得到的是一张空白图，工具的做法是自动降低倍率来保证出图。桌面 Chrome 的上限很高，iOS Safari 只有约 1677 万像素，所以在手机上导超长文章，清晰度会被迫降下来——重要长文建议在电脑上导。
- 跨域图片会污染 canvas 导致导出直接失败。正文里引用了别人站点的图片就可能遇到，换成本地图片或去掉再导。
- 图片要等加载完成才能截，工具会统一等一轮，网络慢时多等一会儿再点。
代码块的坑集中在样式：公众号没有语法高亮，飞书可能把它降级成普通段落，邮件客户端可能剥掉背景色。稳妥做法是短代码尽量用行内代码（npm run build 这种），需要成块展示且必须保留缩进和高亮的，转成图片贴过去。另外围栏代码块的语言标记只影响高亮，不影响内容，平台不支持时也不会报错。
五、按目标选路径
- 发公众号：转富文本，选公众号主题，粘贴后单独处理图片。代码多的话把代码块截成图。
- 发同事 / 交付客户：转 Word，检查标题大纲和列表层级，手动补图，需要目录时用 Word 的自动目录。
- 发博客 / 提交仓库：保留
.md源文，图片走仓库里的相对路径，不要走任何转换。 - 发群聊 / 朋友圈：导出长图，750 px 够用。
- 发邮件：转富文本，避免依赖背景色的排版，重要信息用加粗而不是底色标注。
一个通用建议：Markdown 源文永远是唯一真本。富文本、docx、长图都是产物，改内容回源文改，再重新导一次，不要在产物上改了又忘记同步回来。
常见问题
粘进公众号后字号和行高全变了，是转换没生效吗？ 先确认粘贴时没有被编辑器「清除格式」。公众号编辑器的部分操作会重置内联样式，正确顺序是先粘贴，再在编辑器里调整，不要粘完立刻点清除格式。
转 Word 后为什么没有目录？ 工具生成的是带正确大纲级别的标题，目录需要在 Word 里插入一次：引用选项卡里选自动目录，它会按标题级别生成。这样后续改标题还能一键更新，比转换时写死一份目录更实用。
表格在哪些环节会出问题？ 转富文本时表格能保留；转 Word 只保留单元格文字，合并单元格会散开；粘到部分文档平台会被重排。结构复杂的表格建议在目标平台重做一次。
这些内容会上传服务器吗？ 不会。Markdown 解析、样式套用、docx 打包、长图渲染全部在浏览器里完成，未发布的稿件不会离开你的设备。