[{"data":1,"prerenderedAt":31},["ShallowReactive",2],{"i-lucide:grip":3,"i-lucide:chevron-right":8,"i-lucide:moon":10,"i-lucide:sun":12,"i-lucide:languages":14,"i-lucide:chevron-down":16,"i-lucide:shield-check":18,"i-lucide:mail":20,"blog-body-ai-markdown-editor-live-preview-zh":22,"i-lucide:lightbulb":23,"i-lucide:code":25,"i-lucide:file-text":27,"i-lucide:pen-line":29},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"12\" cy=\"5\" r=\"1\"\u002F>\u003Ccircle cx=\"19\" cy=\"5\" r=\"1\"\u002F>\u003Ccircle cx=\"5\" cy=\"5\" r=\"1\"\u002F>\u003Ccircle cx=\"12\" cy=\"12\" r=\"1\"\u002F>\u003Ccircle cx=\"19\" cy=\"12\" r=\"1\"\u002F>\u003Ccircle cx=\"5\" cy=\"12\" r=\"1\"\u002F>\u003Ccircle cx=\"12\" cy=\"19\" r=\"1\"\u002F>\u003Ccircle cx=\"19\" cy=\"19\" r=\"1\"\u002F>\u003Ccircle cx=\"5\" cy=\"19\" r=\"1\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m9 18l6-6l-6-6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":13},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"4\"\u002F>\u003Cpath d=\"M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":15},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m5 8l6 6m-7 0l6-6l2-3M2 5h12M7 2h1m14 20l-5-10l-5 10m2-4h6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":17},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m6 9l6 6l6-6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":19},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\"\u002F>\u003Cpath d=\"m9 12l2 2l4-4\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":21},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"m22 7l-8.991 5.727a2 2 0 0 1-2.009 0L2 7\"\u002F>\u003Crect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\"\u002F>\u003C\u002Fg>","\u003Cblockquote>\n\u003Cp>Markdown 的表格和代码块在对话里只是字符，\u003Cstrong>只有渲染之后才知道乱不乱\u003C\u002Fstrong>。不要在聊天里把整篇来回贴、让 AI 独自出完一版；让它写进打开着的草稿，你在分栏预览上把控表格和清单——改一处用局部替换，不要整篇覆盖。\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>\u003Cimg src=\"\u002Fblog\u002Fai-markdown-editor-live-preview\u002Fcover.webp\" alt=\"文章核心论点配图\">\u003C\u002Fp>\n\u003Ch2>为什么对话里的 Markdown 看起来没问题，贴出去就乱？\u003C\u002Fh2>\n\u003Cp>因为聊天窗口几乎不按 GitHub 风味 Markdown（GFM）做完整预览。管道符凑出来的表，在对话里像对齐了，进编辑器才发现少了一列；任务清单的 \u003Ccode>- [ ]\u003C\u002Fcode> 在聊天里只是符号，渲染后才知道能不能勾选；围栏代码块的语言标记写错，对话里看不出来高亮会塌。\u003C\u002Fp>\n\u003Cp>来回粘贴还有两个操作成本。一是长文反复占用上下文，模型容易忘掉你上一轮已经改过的小节。二是人习惯说「按这个再出一版」，于是得到\u003Cstrong>另一份全文\u003C\u002Fstrong>，而不是叠在原稿上的补丁。手工改过的标题、已经核对过的数字，会在「再出一版」里消失。\u003C\u002Fp>\n\u003Cp>所以实时预览不是装饰：它把「符号对不对」变成「排版对不对」。人机共写要成立，草稿必须活在\u003Cstrong>看得见渲染的那一页\u003C\u002Fstrong>，而不是活在聊天记录里。\u003C\u002Fp>\n\u003Ch2>和 AI 共写同一份草稿，要注意什么？\u003C\u002Fh2>\n\u003Cp>能指出某一节时，就让助手做\u003Cstrong>局部替换\u003C\u002Fstrong>；只有结构整体作废时，才允许整篇重写。局部替换保留你已改过的句子和本地图片引用；整篇覆盖等于换一份新文件。打开 \u003Ca href=\"\u002Fzh\u002Fmarkdown\u002Fedit\u002F\">Markdown 在线编辑器\u003C\u002Fa>，导入或粘贴草稿，打开「连接你的 AI」，这个标签不要关。\u003C\u002Fp>\n\u003Cp>一次来回可以是这样——AI 加快改表和清单，你看右侧排版决过不过关：\u003C\u002Fp>\n\u003Cp>\u003Cstrong>你：\u003C\u002Fstrong>\u003Cbr>\n只改「范围」和「工作量」两节：三条做成任务清单，表的第三列改成单位小时。不要动标题，也不要重写全文。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>助手：\u003C\u002Fstrong>\u003Cbr>\n已经在当前页做了局部替换。请看右侧预览：清单能不能勾选、表是否少列。哪里不对指出小节名，我只改那里。\u003C\u002Fp>\n\u003Cp>不要靠想象猜表格乱不乱——左边是对话，箭头连到右边正在打开的编辑页，右侧预览已经渲染出清单和表格：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fblog\u002Fai-markdown-editor-live-preview\u002F02-ai-flow.webp\" alt=\"左边和 AI 对话，右边 MeTool Markdown 页立刻出现排版结果\">\u003C\u002Fp>\n\u003Cp>看见表头没对齐，说「只修那张表的分隔行」，不要说「按这个再出一版」。人机双写在这里，就是同一份 \u003Ccode>main.md\u003C\u002Fcode> 上叠补丁，而不是每次换一份新稿。接入见 \u003Ca href=\"\u002Fzh\u002Fblog\u002Fp\u002Fconnect-ai-to-online-tools\u002F\">怎么让 AI 操作网页工具\u003C\u002Fa>，概念见 \u003Ca href=\"\u002Fzh\u002Fblog\u002Fp\u002Fhuman-ai-cowriting\u002F\">人机双写\u003C\u002Fa>。\u003C\u002Fp>\n\u003Cp>这一页支持常见 GFM：表格、任务清单、删除线、带语言标记的代码块。为控制体积，页内\u003Cstrong>不渲染 Mermaid\u003C\u002Fstrong>；要画流程图应换 \u003Ca href=\"\u002Fzh\u002Fmarkdown\u002Fmermaid\u002F\">Mermaid 页\u003C\u002Fa>。还可以说：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>「全文语气改成给非技术同事看，但代码块原样保留。」\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>图片若是你在页上导入的，链接指向浏览器本地对象。助手重写时应\u003Cstrong>原样保留那些图片路径\u003C\u002Fstrong>；一旦整篇覆盖成「请自行配图」，预览里的图会全部消失。下载时：没有本地图就保存 \u003Ccode>.md\u003C\u002Fcode>；有本地图则打成 \u003Ccode>.zip\u003C\u002Fcode>（文稿加图片）。保存对话框在浏览器里弹出，对话里不会出现文件字节。\u003C\u002Fp>\n\u003Ch2>什么时候该用编辑器共写，什么时候不必？\u003C\u002Fh2>\n\u003Cp>需要对着渲染判断的长稿，才值得把助手请到编辑页；只要一段纯文本回信，在对话里写完即可。\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>任务\u003C\u002Fth>\n\u003Cth>更合适的做法\u003C\u002Fth>\n\u003Cth>原因\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>需求文档、纪要、README 草稿\u003C\u002Ftd>\n\u003Ctd>编辑页共写 + 实时预览\u003C\u002Ftd>\n\u003Ctd>表格和清单必须看见\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>只改一个错别字、一处链接\u003C\u002Ftd>\n\u003Ctd>人在页上直接改\u003C\u002Ftd>\n\u003Ctd>不必把 AI 请进场\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>结构全错、准备推翻重写\u003C\u002Ftd>\n\u003Ctd>允许一次整篇覆盖，然后改回局部模式\u003C\u002Ftd>\n\u003Ctd>旧稿没有可保留段落\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>要把图发到公众号 \u002F 小红书\u003C\u002Ftd>\n\u003Ctd>先在本页定稿，再走对应转换\u003C\u002Ftd>\n\u003Ctd>编辑页负责源稿，不负责平台皮肤\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>流程图、单独公式出图\u003C\u002Ftd>\n\u003Ctd>换 Mermaid 或公式页\u003C\u002Ftd>\n\u003Ctd>本页不渲染图，公式完整导出也不在这里\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>还要把同一份 \u003Ccode>.md\u003C\u002Fcode> 分发到多个平台时，定稿后看 \u003Ca href=\"\u002Fzh\u002Fblog\u002Fp\u002Fmarkdown-publish-everywhere\u002F\">一份 Markdown 一稿多发\u003C\u002Fa>。只是打不开别人发来的 \u003Ccode>.md\u003C\u002Fcode>，看 \u003Ca href=\"\u002Fzh\u002Fblog\u002Fp\u002Fopen-md-file\u002F\">下载的 .md 怎么打开\u003C\u002Fa>，那是预览问题，不是共写问题。\u003C\u002Fp>\n\u003Cp>边界：连接跟着标签走，关页即断。单文件经中继改写时体积有上限（大约一百多 KB 量级的文本）；更大的稿适合分段改，或只让助手处理当前打开的这一份。编辑器草稿存在本机浏览器里，换设备不会自动带上——要带走就下载。\u003C\u002Fp>\n\u003Ch2>小结\u003C\u002Fh2>\n\u003Cp>让 AI 写 Markdown，关键不是它会不会语法，而是\u003Cstrong>表格和代码必须被渲染出来你才知道对不对\u003C\u002Fstrong>。把助手接到左右分栏的那一页，共写同一份 \u003Ccode>main.md\u003C\u002Fcode>：能局部替换就不要整篇覆盖。对话里来回贴长文、让模型独自出完一版，看起来快，丢掉的是中途已经做对的那些行。\u003C\u002Fp>\n",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":24},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 14c.2-1 .7-1.7 1.5-2.5c1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5c.7.7 1.3 1.5 1.5 2.5m0 4h6m-5 4h4\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":26},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m16 18l6-6l-6-6M8 6l-6 6l6 6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":28},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z\"\u002F>\u003Cpath d=\"M14 2v5a1 1 0 0 0 1 1h5M10 9H8m8 4H8m8 4H8\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":30},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 21h8m.174-14.188a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\"\u002F>",1788171097053]