[{"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-en":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>Tables and code fences in Markdown are only characters in chat. \u003Cstrong>You only know if they break after they render.\u003C\u002Fstrong> Do not paste the whole file back and forth and let AI finish a version alone. Have it write into the open draft; you steer tables and lists on the split preview — local replace for one change, not a full overwrite.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>\u003Cimg src=\"\u002Fblog\u002Fai-markdown-editor-live-preview\u002Fcover.webp\" alt=\"Core argument illustration\">\u003C\u002Fp>\n\u003Ch2>Why does Markdown look fine in chat and fall apart when I paste it out?\u003C\u002Fh2>\n\u003Cp>Because a chat window almost never does a full GitHub-flavored Markdown (GFM) preview. A table made of pipes can look aligned in chat and miss a column in an editor. \u003Ccode>- [ ]\u003C\u002Fcode> is only a symbol in chat; after render you see whether it is checkable. A wrong language tag on a fenced block will not show that highlighting collapsed.\u003C\u002Fp>\n\u003Cp>Pasting back and forth has two more costs. Long drafts eat context, and the model forgets a section you already fixed. People also say “give me another version of this,” and get \u003Cstrong>a second full file\u003C\u002Fstrong>, not a patch on the original. Hand-edited titles and numbers you already checked disappear in that “another version.”\u003C\u002Fp>\n\u003Cp>So live preview is not decoration: it turns “are the symbols right?” into “is the layout right?” Cowriting only holds if the draft lives on \u003Cstrong>the page that renders\u003C\u002Fstrong>, not in the chat log.\u003C\u002Fp>\n\u003Ch2>What should I watch when cowriting the same draft with AI?\u003C\u002Fh2>\n\u003Cp>If you can point at a section, have the assistant do a \u003Cstrong>local replace\u003C\u002Fstrong>. Only allow a full rewrite when the structure as a whole is scrap. Local replace keeps sentences you already changed and local image references; a full overwrite is a new file. Open the \u003Ca href=\"\u002Fmarkdown\u002Fedit\u002F\">Markdown editor\u003C\u002Fa>, import or paste the draft, turn on Connect your AI, keep the tab open.\u003C\u002Fp>\n\u003Cp>One round can look like this — AI speeds the table and the list; you decide pass\u002Ffail on the right-hand layout:\u003C\u002Fp>\n\u003Cp>\u003Cstrong>You:\u003C\u002Fstrong>\u003Cbr>\nOnly change the Scope and Effort sections: turn the three items into a task list, and make the third table column hours. Do not touch the title, and do not rewrite the whole file.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Assistant:\u003C\u002Fstrong>\u003Cbr>\nLocal replace is done on the current page. Check the right-hand preview: can the list be checked, and is the table missing a column? If something is off, name the section and I will only change that.\u003C\u002Fp>\n\u003Cp>Do not imagine whether the table is broken — chat on the left, an arrow to the editor on the right, preview already rendering the list and the table:\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fblog\u002Fai-markdown-editor-live-preview\u002F02-ai-flow.en.webp\" alt=\"Chat on the left, MeTool Markdown page on the right showing the rendered layout\">\u003C\u002Fp>\n\u003Cp>If a header is misaligned, say “only fix that table’s separator row,” not “give me another version of this.” Cowriting here is stacking patches on the same \u003Ccode>main.md\u003C\u002Fcode>, not swapping a new draft every round. Setup: \u003Ca href=\"\u002Fblog\u002Fp\u002Fconnect-ai-to-online-tools\u002F\">How do I let my current AI operate a web tool?\u003C\u002Fa>. Concept: \u003Ca href=\"\u002Fblog\u002Fp\u002Fhuman-ai-cowriting\u002F\">What is human–AI cowriting?\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cp>This page supports common GFM: tables, task lists, strikethrough, fenced code with language tags. To keep the bundle small, \u003Cstrong>Mermaid is not rendered here\u003C\u002Fstrong>; for flowcharts use the \u003Ca href=\"\u002Fmarkdown\u002Fmermaid\u002F\">Mermaid page\u003C\u002Fa>. You can also say:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>“Make the tone readable for non-technical teammates, but leave code fences as they are.”\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>If you imported images on the page, links point at local browser objects. The assistant should \u003Cstrong>keep those image paths as-is\u003C\u002Fstrong> when it rewrites; a full overwrite that says “add your own images” will blank the preview. On download: no local images → save \u003Ccode>.md\u003C\u002Fcode>; with local images → a \u003Ccode>.zip\u003C\u002Fcode> of the draft plus images. The save dialog is in the browser; chat will not receive file bytes.\u003C\u002Fp>\n\u003Ch2>When is the editor worth cowriting on, and when is it not?\u003C\u002Fh2>\n\u003Cp>Long drafts that must be judged against a render are worth bringing the assistant onto the editor. A short plain-text reply can stay in chat.\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Task\u003C\u002Fth>\n\u003Cth>Better approach\u003C\u002Fth>\n\u003Cth>Why\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>Specs, recaps, README drafts\u003C\u002Ftd>\n\u003Ctd>Cowrite on the editor + live preview\u003C\u002Ftd>\n\u003Ctd>Tables and lists have to be seen\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>One typo, one link\u003C\u002Ftd>\n\u003Ctd>You edit on the page\u003C\u002Ftd>\n\u003Ctd>No need to invite AI\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Structure is all wrong, ready to throw away\u003C\u002Ftd>\n\u003Ctd>Allow one full overwrite, then return to local replace\u003C\u002Ftd>\n\u003Ctd>The old draft has no keepers\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Need images for a newsletter or Xiaohongshu\u003C\u002Ftd>\n\u003Ctd>Finalize the source here, then convert\u003C\u002Ftd>\n\u003Ctd>This page owns the source, not the platform skin\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Flowcharts, a single formula as an image\u003C\u002Ftd>\n\u003Ctd>Switch to Mermaid or a formula page\u003C\u002Ftd>\n\u003Ctd>This page does not render diagrams, and full formula export is not here\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>If the same \u003Ccode>.md\u003C\u002Fcode> has to go to several platforms after it is final, see \u003Ca href=\"\u002Fblog\u002Fp\u002Fmarkdown-publish-everywhere\u002F\">Publish one Markdown everywhere\u003C\u002Fa>. If you only cannot open a \u003Ccode>.md\u003C\u002Fcode> someone sent you, see \u003Ca href=\"\u002Fblog\u002Fp\u002Fopen-md-file\u002F\">How do I open a downloaded .md file?\u003C\u002Fa> — that is a preview problem, not a cowriting problem.\u003C\u002Fp>\n\u003Cp>Boundaries: the connection follows the tab; close the page and it drops. A single file rewritten over the relay has a size cap (on the order of a hundred-plus KB of text); larger drafts should be edited in chunks, or only the currently open file. Editor drafts live in this browser; they will not follow you to another device unless you download.\u003C\u002Fp>\n\u003Ch2>Wrap-up\u003C\u002Fh2>\n\u003Cp>Letting AI write Markdown is not about whether it knows the syntax. \u003Cstrong>Tables and code have to render before you know they are right.\u003C\u002Fstrong> Point the assistant at the split-pane page and cowrite the same \u003Ccode>main.md\u003C\u002Fcode>: local replace when you can, full overwrite only when you must. Pasting long files through chat and letting the model finish a version looks fast; what you lose are the lines you already got right.\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>",1788171087313]