[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-switch-ai-outputs-markdown-to-html-zh":3,"article-related-switch-ai-outputs-markdown-to-html-zh":30,"series-ai-agent-38406a12-f833-4c69-ae22-99c31f03dd52":83},{"id":4,"slug":5,"title":6,"content":7,"summary":8,"source":9,"source_url":10,"author":11,"image_url":12,"cover_image":12,"category":13,"language":14,"translated_content":11,"related_article_id":15,"keywords":16,"key_takeaways":22,"views":26,"created_at":27,"published_at":28,"topic_cluster_id":29},"38406a12-f833-4c69-ae22-99c31f03dd52","switch-ai-outputs-markdown-to-html-zh","怎麼把 AI 輸出改成 HTML","\u003Cp data-speakable=\"summary\">把 \u003Ca href=\"\u002Fnews\u002Faisafetybenchexplorer-ai-safety-benchmarks-zh\">AI\u003C\u002Fa> 生成內容的預設輸出格式改成 HTML，能讓結構更穩定，也更容易清理與渲染。\u003C\u002Fp>\u003Cp>這篇給開發者、提示工程師和產品團隊看。你照做完，會得到一套 HTML-first 的輸出流程，包含提示詞規格、回傳格式、清理步驟與前端顯示方式。\u003C\u002Fp>\u003Cp>這套做法受到 Anthropic 文件與 \u003Ca href=\"\u002Fnews\u002Fwhy-claude-code-prompt-design-beats-ide-copilots-zh\">Clau\u003C\u002Fa>de Code 團隊對 HTML 作為預設格式的討論啟發。可先看 \u003Ca href=\"https:\u002F\u002Fdocs.anthropic.com\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">Anthropic docs\u003C\u002Fa> 與 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fanthropics\" target=\"_blank\" rel=\"noopener noreferrer\">Anthropic GitHub org\u003C\u002Fa>。\u003C\u002Fp>\u003Ch2>開始之前\u003C\u002Fh2>\u003Cul>\u003Cli>一個可用的 Anthropic 帳號與 API 存取權\u003C\u002Fli>\u003Cli>Claude 或 Claude Code 的 API key\u003C\u002Fli>\u003Cli>Node 20+ 或 Python 3.11+\u003C\u002Fli>\u003Cli>本機專案內已有 prompt 檔或 agent 設定檔\u003C\u002Fli>\u003Cli>可用的 HTML sanitizer 或 parser，例如 DOMPurify、Beautiful Soup\u003C\u002Fli>\u003Cli>可安全顯示 HTML 的 renderer 或 UI 層\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>Step 1: 定義 HTML 輸出合約\u003C\u002Fh2>\u003Cp>目的：先把模型能輸出的標籤範圍固定下來，避免它自由發揮成混亂的文字或混入不需要的格式。你要把允許的元素寫進 system prompt 或 \u003Ca href=\"\u002Ftag\u002Fagent\">agent\u003C\u002Fa> 指令，讓模型知道輸出只能是 HTML。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1778743243861-8901.png\" alt=\"怎麼把 AI 輸出改成 HTML\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cpre>\u003Ccode>You are a content generator. Output valid HTML only. Use these tags only: h2, p, ul, li, strong, em, code, pre, a. Do not wrap the result in Markdown fences.\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>驗收：你應該看到模型直接回傳原始 HTML，第一個字元就是標籤，不會先出現 Markdown 項目符號、三個反引號，或任何開場說明。\u003C\u002Fp>\u003Ch2>Step 2: 重寫提示詞結構\u003C\u002Fh2>\u003Cp>目的：把「格式好看」這種模糊要求，改成「文件要有哪些區塊」這種可執行要求。你要明確指定段落順序、標題層級、清單形式，以及連結與程式碼的寫法。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1778743248407-tm3v.png\" alt=\"怎麼把 AI 輸出改成 HTML\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cpre>\u003Ccode>Return HTML with this structure: one intro paragraph, then an h2 for each major section, then paragraphs and lists under each section. Put links in anchor tags with href. Put code in pre\u002Fcode blocks.\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>驗收：你應該看到多次執行後的區塊順序一致，段落位置穩定，連結與程式碼也會固定出現在指定位置。\u003C\u002Fp>\u003Ch2>Step 3: 加入 HTML 清理器\u003C\u002Fh2>\u003Cp>目的：在渲染前先擋掉危險或破損的標記，避免模型輸出直接進到瀏覽器。你要先解析內容，再移除不允許的標籤與屬性，最後才交給 UI 層顯示。\u003C\u002Fp>\u003Cpre>\u003Ccode>\u002F\u002F Example in Node.js with a sanitizer pipeline\nimport DOMPurify from 'dompurify';\nconst clean = DOMPurify.sanitize(modelHtml, { USE_PROFILES: { html: true } });\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>驗收：你應該看到最終 HTML 只剩允許的標籤，script、\u003Ca href=\"\u002Fnews\u002Fwhy-linux-security-needs-patch-wave-mindset-zh\">in\u003C\u002Fa>line event handler、非法屬性都會被清掉。\u003C\u002Fp>\u003Ch2>Step 4: 建立 Markdown 相容備援\u003C\u002Fh2>\u003Cp>目的：保留 HTML 作為來源格式，但讓不支援 HTML 的工具也能使用內容。你要在邊緣層做轉換，而不是回到 prompt 裡要求模型同時產生兩種格式。\u003C\u002Fp>\u003Cpre>\u003Ccode>\u002F\u002F Pseudocode\nif (clientSupportsHtml) {\n  renderHtml(cleanHtml);\n} else {\n  renderMarkdown(htmlToMarkdown(cleanHtml));\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>驗收：你應該看到同一份內容能在 HTML 客戶端與 Markdown-only 客戶端中正常顯示，而且標題、清單與連結都還保有原意。\u003C\u002Fp>\u003Ch2>Step 5: 比對多次輸出一致性\u003C\u002Fh2>\u003Cp>目的：確認 HTML 是否真的讓你的用例更穩定。你要用相同輸入跑多次，重點比較標籤結構、區塊順序與連結位置，而不是只看文字有沒有變化。\u003C\u002Fp>\u003Cpre>\u003Ccode>Run 10 prompts with the same input and compare:\n- number of headings\n- allowed tag usage\n- link placement\n- presence of invalid markup\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>驗收：你應該看到 tag pattern 比 Markdown 更穩定，格式驚喜更少，後處理成本也更低。\u003C\u002Fp>\u003Ch2>常見錯誤\u003C\u002Fh2>\u003Cul>\u003Cli>讓模型自己發明標籤。修法：先給 allowlist，再把不在清單內的元素全部拒收。\u003C\u002Fli>\u003Cli>未清理就直接渲染原始 HTML。修法：在伺服器或可信任客戶端先做 sanitize，再顯示。\u003C\u002Fli>\u003Cli>在 HTML prompt 裡混入 Markdown 規則。修法：讓模型只輸出一種來源格式，轉換邏輯放到 prompt 外。\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>接下來可以看什麼\u003C\u002Fh2>\u003Cp>當 HTML-first 流程穩定後，可以再往提示詞模板化、schema 驗證與 agent 工具延伸，讓模型直接產出更複雜但仍可控的文件與 UI-ready 內容。\u003C\u002Fp>","把 AI 生成內容的預設輸出格式從 Markdown 改成 HTML，建立可驗證、可清理、可渲染的工作流程。","zhuanlan.zhihu.com","https:\u002F\u002Fzhuanlan.zhihu.com\u002Fp\u002F2036771385641529388",null,"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1778743243861-8901.png","ai-agent","zh","fda44d24-7baf-4d91-a7f9-bbfecae20a27",[17,18,19,20,21],"HTML","Markdown","Anthropic","Claude","DOMPurify",[23,24,25],"先定義 HTML 輸出合約，再要求模型只輸出允許的標籤。","把清理與渲染放在模型外部，避免原始 HTML 直接進入 UI。","用多次執行比對 tag 結構與區塊順序，驗證穩定性。",4,"2026-05-14T07:20:21.545364+00:00","2026-05-14T07:20:21.527+00:00","5109b7bc-1e30-4a3b-9f62-852fc31d521f",{"tags":31,"relatedLang":42,"relatedPosts":46},[32,34,36,38,40],{"name":19,"slug":33},"anthropic",{"name":20,"slug":35},"claude",{"name":18,"slug":37},"markdown",{"name":21,"slug":39},"dompurify",{"name":17,"slug":41},"html",{"id":15,"slug":43,"title":44,"language":45},"switch-ai-outputs-markdown-to-html-en","How to Switch AI Outputs from Markdown to HTML","en",[47,53,59,65,71,77],{"id":48,"slug":49,"title":50,"cover_image":51,"image_url":51,"created_at":52,"category":13},"83c2f8f6-3710-466e-b52c-473b811f0535","how-to-set-up-openclaw-safely-zh","如何安全架設 OpenClaw","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780549368665-1t2l.png","2026-06-04T05:02:21.26625+00:00",{"id":54,"slug":55,"title":56,"cover_image":57,"image_url":57,"created_at":58,"category":13},"0ba5b1a8-82c5-464a-bea5-9a2c8730da74","aws-devops-agent-turns-incident-chaos-into-triage-zh","AWS DevOps Agent 把事故排查變成三步","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780466689960-g1sv.png","2026-06-03T06:03:14.154923+00:00",{"id":60,"slug":61,"title":62,"cover_image":63,"image_url":63,"created_at":64,"category":13},"841eac88-b0f0-4a4c-9e1e-efc3b5c16281","kimi-k26-live-300-agent-workflows-zh","Kimi K2.6 上線：300 代理工作流","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780430574285-hqpn.png","2026-06-02T20:02:24.972179+00:00",{"id":66,"slug":67,"title":68,"cover_image":69,"image_url":69,"created_at":70,"category":13},"f0411957-bcdb-42d9-a267-3e90ae7d9cb1","how-to-take-a-sabbatical-at-openai-zh","怎麼申請 OpenAI sabbatical","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780398216422-8fi7.png","2026-06-02T11:02:25.74372+00:00",{"id":72,"slug":73,"title":74,"cover_image":75,"image_url":75,"created_at":76,"category":13},"37a5e429-4235-439c-9b05-bb377085462c","8-steps-build-production-rag-with-langchain-zh","8 步驟打造可上線的 LangChain RAG","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780178597493-4hz7.png","2026-05-30T22:02:48.14022+00:00",{"id":78,"slug":79,"title":80,"cover_image":81,"image_url":81,"created_at":82,"category":13},"e73c041b-852b-44c3-85aa-0f1e2e5848e3","ai-agents-hit-chaos-mode-claude-code-openclaw-zh","Claude Code＋OpenClaw 讓 AI 代理失控升溫","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780160576178-yqcs.png","2026-05-30T17:02:25.725767+00:00",[84,89,94,99,104,109,114,119,124,129],{"id":85,"slug":86,"title":87,"created_at":88},"4ae1e197-1d3d-4233-8733-eafe9cb6438b","claude-now-uses-your-pc-to-finish-tasks-zh","Claude 開始幫你操作電腦","2026-03-26T07:20:48.457387+00:00",{"id":90,"slug":91,"title":92,"created_at":93},"5bede67f-e21c-413d-9ab8-54a3c3d26227","googles-2026-ai-agent-report-decoded-zh","Google 2026 AI Agent 報告解讀","2026-03-26T11:15:22.651956+00:00",{"id":95,"slug":96,"title":97,"created_at":98},"2987d097-563f-46c7-b76f-b558d8ef7c2b","kimi-k25-review-stronger-still-not-legend-zh","Kimi K2.5 評測：更強，但還不是神作","2026-03-27T07:15:55.277513+00:00",{"id":100,"slug":101,"title":102,"created_at":103},"95c9053b-e3f4-4cb5-aace-5c54f4c9e044","claude-code-controls-mac-desktop-zh","Claude Code 也能操控 Mac 了","2026-03-28T03:01:58.58121+00:00",{"id":105,"slug":106,"title":107,"created_at":108},"dc58e153-e3a8-4c06-9b96-1aa64eabbf5f","cloudflare-100x-faster-ai-agent-sandbox-zh","Cloudflare 的 AI 沙箱跑超快","2026-03-28T03:09:44.142236+00:00",{"id":110,"slug":111,"title":112,"created_at":113},"1c8afc56-253f-47a2-979f-1065ff072f2a","openai-backs-isara-agent-swarm-bet-zh","OpenAI 挺 Isara 的 agent swarm …","2026-03-28T03:15:27.513155+00:00",{"id":115,"slug":116,"title":117,"created_at":118},"7379b422-576e-45df-ad5a-d57a0d9dd467","openai-plan-automated-ai-researcher-zh","OpenAI 想做自動化 AI 研究員","2026-03-28T03:17:42.090548+00:00",{"id":120,"slug":121,"title":122,"created_at":123},"48c9889e-86df-450b-a356-e4a4b7c83c5b","harness-engineering-ai-agent-reliability-2026-zh","駕馭工程：從「馬具」到「作業系統」，AI Agent 可靠性的終極密碼","2026-03-31T06:42:53.556721+00:00",{"id":125,"slug":126,"title":127,"created_at":128},"96d8e8c8-1edd-475d-9145-b1e7a1b02b65","mcp-explained-from-prompts-to-production-zh","MCP 怎麼把提示詞變工作流","2026-04-01T09:24:39.321274+00:00",{"id":130,"slug":131,"title":132,"created_at":133},"f2ca7720-b471-4ce5-9336-2a9ac2a876fd","amazon-bedrock-agents-multi-agent-workflows-zh","Amazon Bedrock Agents 進入多代理工作流","2026-04-01T09:30:29.945429+00:00"]