1. 項(xiàng)目緣起從純文本到富文本的AI交互體驗(yàn)升級最近在折騰一個(gè)AI對話應(yīng)用的后端服務(wù)功能跑通后發(fā)現(xiàn)了一個(gè)不大不小但很影響體驗(yàn)的問題AI的回復(fù)全是純文本。當(dāng)它試圖解釋一段代碼、列出一個(gè)步驟清單或者給出一個(gè)包含表格的數(shù)據(jù)時(shí)回復(fù)框里呈現(xiàn)的就是一堆帶著星號、反引號和橫線的“天書”。用戶需要自己在腦子里把**加粗**、- 列表項(xiàng)或者| 表頭 | 表頭 |這樣的標(biāo)記語言“翻譯”成視覺上結(jié)構(gòu)清晰的富文本。這就像給了用戶一份需要自己組裝的家具卻只提供了零件清單和一張模糊的圖紙?bào)w驗(yàn)大打折扣。這不僅僅是美觀問題更是信息傳達(dá)效率的問題。Markdown作為一種輕量級標(biāo)記語言其核心價(jià)值就在于“易讀易寫”并且能輕松轉(zhuǎn)換為結(jié)構(gòu)化的HTML。在AI對話場景中支持Markdown渲染意味著AI能夠以更符合人類閱讀習(xí)慣的方式組織信息代碼塊有高亮、重點(diǎn)內(nèi)容被加粗、列表清晰分層、表格整齊劃一。這直接提升了信息的可讀性和專業(yè)性讓AI從一個(gè)“會說話的文本生成器”變成一個(gè)“會排版的智能助手”。我觀察到的相關(guān)熱詞比如markdown語法、markdown編輯器、vscode markdown插件都指向了開發(fā)者或內(nèi)容創(chuàng)作者對Markdown工作流的深度依賴。而ai agent、spring ai這類詞則反映了AI能力正在被快速集成到各類應(yīng)用中。將兩者結(jié)合——讓AI的產(chǎn)出直接適配主流的Markdown渲染管線就成了一個(gè)非常實(shí)際且高頻的需求。這不僅僅是前端畫個(gè)界面那么簡單它涉及到前后端數(shù)據(jù)流的配合、安全過濾、以及不同平臺渲染一致性的挑戰(zhàn)。接下來我就結(jié)合這次實(shí)踐把從識別需求到完整實(shí)現(xiàn)的思路、踩過的坑和最終方案詳細(xì)拆解一遍。2. 技術(shù)選型尋找渲染管道的“最佳拍檔”決定要做Markdown渲染后第一個(gè)問題就是怎么做在哪里做這本質(zhì)上是一個(gè)渲染管道的設(shè)計(jì)問題。我們需要在數(shù)據(jù)流中找到一個(gè)合適的位置將AI返回的、包含Markdown標(biāo)記的原始字符串轉(zhuǎn)換成前端可以安全、高效渲染的富文本結(jié)構(gòu)。2.1 前端渲染 vs 后端渲染這是第一個(gè)需要權(quán)衡的岔路口。前端渲染意味著后端API原樣返回Markdown字符串由瀏覽器或客戶端應(yīng)用負(fù)責(zé)將其解析并渲染成HTML。這是目前非常主流和靈活的方案。它的優(yōu)勢很明顯減輕服務(wù)器壓力解析和渲染的計(jì)算工作分?jǐn)偟搅嗣總€(gè)用戶的設(shè)備上。動態(tài)交互友好對于需要實(shí)時(shí)編輯、預(yù)覽的Markdown編輯器場景前端渲染幾乎是唯一選擇可以做到輸入即預(yù)覽。技術(shù)生態(tài)豐富前端有大量成熟、優(yōu)秀的Markdown解析庫如marked、markdown-it、Showdown等它們功能強(qiáng)大支持插件擴(kuò)展例如代碼高亮、數(shù)學(xué)公式、自定義組件等。但是純前端渲染也有其局限性尤其是在AI對話這種強(qiáng)內(nèi)容生成的場景下首屏性能對于較長的AI回復(fù)前端需要先下載完整的Markdown文本然后執(zhí)行JS解析最后才能渲染出最終視圖這可能會帶來可感知的延遲。一致性挑戰(zhàn)如果AI回復(fù)中包含了需要特定資源如特定版本的代碼高亮樣式、數(shù)學(xué)公式渲染引擎的內(nèi)容需要確保前端環(huán)境已正確加載這些依賴否則渲染結(jié)果可能不一致。SEO不友好如果AI對話內(nèi)容有被搜索引擎收錄的需求那么爬蟲抓取到的原始Markdown文本可讀性遠(yuǎn)不如渲染后的HTML。后端渲染則是在服務(wù)器端將Markdown字符串解析為HTML然后直接將HTML字符串返回給前端前端只需將其插入到DOM中通常使用v-html、dangerouslySetInnerHTML或類似機(jī)制。它的優(yōu)缺點(diǎn)正好相反首屏性能更優(yōu)前端拿到的是立即可渲染的HTML省去了解析時(shí)間。輸出一致性高服務(wù)器環(huán)境是可控的可以確保解析器和所有插件版本固定輸出結(jié)果穩(wěn)定。潛在的SEO優(yōu)勢直接輸出HTML對爬蟲更友好。但缺點(diǎn)也很突出服務(wù)器開銷增加每次AI回復(fù)都需要服務(wù)器進(jìn)行解析計(jì)算如果并發(fā)量高這是一筆額外的開銷。交互性受限生成的HTML是“死”的如果希望用戶能點(diǎn)擊復(fù)制代碼塊、折疊展開某些內(nèi)容需要額外注入大量的前端腳本和事件綁定復(fù)雜度陡增。安全風(fēng)險(xiǎn)直接將后端生成的HTML插入前端如果清洗不徹底極易引發(fā)XSS跨站腳本攻擊。必須進(jìn)行嚴(yán)格的HTML凈化。2.2 混合渲染策略我的選擇與理由經(jīng)過權(quán)衡我選擇了“后端解析前端渲染”的混合策略。具體來說后端Node.js/Python/Go等接收AI的原始回復(fù)包含Markdown。使用一個(gè)可靠的Markdown解析庫如markdown-itfor Node.js,python-markdownfor Python將其解析成一個(gè)中間表示例如一個(gè)JSON AST抽象語法樹或者一個(gè)高度結(jié)構(gòu)化的數(shù)據(jù)對象。這個(gè)過程中可以安全地執(zhí)行一些預(yù)處理比如識別出所有的代碼塊記錄語言類型、鏈接、圖片等。前后端通信后端不再返回純文本或HTML而是返回這個(gè)結(jié)構(gòu)化的數(shù)據(jù)對象JSON格式。前端Vue/React等前端根據(jù)這個(gè)結(jié)構(gòu)化的數(shù)據(jù)使用自己的組件庫來渲染。例如遇到“code_block”類型且語言為“javascript”就使用CodeBlock language“javascript”這個(gè)專用組件來渲染該組件內(nèi)部會集成代碼高亮庫如Prism.js或highlight.js。為什么選擇這個(gè)看起來更復(fù)雜的方案核心原因是安全、靈活與職責(zé)分離。安全徹底杜絕了XSS。后端不輸出HTML前端不解析原始Markdown。數(shù)據(jù)是結(jié)構(gòu)化的渲染是組件化的。圖片鏈接、跳轉(zhuǎn)鏈接等可以在組件層面進(jìn)行安全策略控制例如限制圖片域名、為外鏈添加rel“noopener noreferrer”。靈活與一致性前端完全掌控最終視覺效果。我可以為“引用塊”設(shè)計(jì)獨(dú)特的樣式為“表格”添加滾動和懸停效果為“任務(wù)列表”添加交互勾選功能如果需求需要所有這些都不需要修改后端代碼。同時(shí)所有用戶看到的UI樣式是統(tǒng)一的。性能與體驗(yàn)雖然首次加載需要下載組件庫和樣式但一旦加載完成后續(xù)的渲染非?？煲?yàn)橹皇菙?shù)據(jù)驅(qū)動組件更新。對于AI流式輸出SSE的場景我們可以流式地接收結(jié)構(gòu)化的數(shù)據(jù)塊chunk并實(shí)時(shí)渲染到界面上體驗(yàn)比接收純文本再解析要好。擴(kuò)展性如果未來需要支持更復(fù)雜的自定義語法或AI返回特定類型的數(shù)據(jù)卡片如天氣卡片、股票信息只需要在前端定義新的組件并在結(jié)構(gòu)化數(shù)據(jù)中增加對應(yīng)的類型標(biāo)識即可后端解析器只需做最小化的適配。這個(gè)方案將Markdown的“解析”理解語法結(jié)構(gòu)和“渲染”生成最終視圖兩個(gè)階段解耦中間用結(jié)構(gòu)化數(shù)據(jù)連接兼顧了安全、性能和未來擴(kuò)展性。當(dāng)然它需要前后端協(xié)同設(shè)計(jì)數(shù)據(jù)協(xié)議并編寫相應(yīng)的組件初期成本較高但對于一個(gè)追求長期穩(wěn)定和體驗(yàn)的中大型項(xiàng)目來說我認(rèn)為是值得的。3. 后端實(shí)現(xiàn)從文本到結(jié)構(gòu)化的安全轉(zhuǎn)換確定了混合渲染的策略后端的工作就清晰了做一個(gè)可靠、安全、高效的“Markdown翻譯官”把帶有標(biāo)記的文本翻譯成機(jī)器和前端都能輕松理解的結(jié)構(gòu)化描述。3.1 解析庫的選擇與配置我使用的后端技術(shù)棧是 Node.js社區(qū)里最主流的Markdown解析庫是markdown-it。它速度快、插件生態(tài)豐富而且可以通過配置嚴(yán)格控制輸出。# 安裝核心庫和常用插件 npm install markdown-it npm install markdown-it-highlightjs # 代碼高亮后端可選我們主要用其識別語言 npm install markdown-it-emoji # 表情符號可選初始化解析器時(shí)安全是首要考慮。我們必須禁用所有可能導(dǎo)致生成任意HTML標(biāo)簽和屬性的功能。const MarkdownIt require(markdown-it); const md new MarkdownIt({ html: false, // 非常重要禁止解析HTML標(biāo)簽防止注入 xhtmlOut: false, breaks: true, // 將換行符轉(zhuǎn)換為 br在結(jié)構(gòu)化數(shù)據(jù)中我們可以用 \n 表示 linkify: true, // 自動將類似URL的文本轉(zhuǎn)換為鏈接 typographer: true, // 一些印刷符號替換如 (c) - ? // 高亮函數(shù)這里我們不直接返回HTML而是收集代碼塊信息 highlight: function (str, lang) { // 我們并不在此處渲染高亮HTML而是將代碼和語言信息記錄下來 // 返回一個(gè)空字符串或特定標(biāo)記因?yàn)槲覀冏罱K要輸出JSON // 實(shí)際處理會在自定義的渲染器里做 return ; // 原始代碼會通過token流獲取 } }); // 明確禁用一些不安全的特性 md.validateLink (url) { // 這里可以實(shí)施鏈接安全策略比如只允許 http/https return /^https?:\/\//.test(url); };3.2 構(gòu)建自定義渲染器輸出ASTmarkdown-it的核心工作原理是將Markdown文本轉(zhuǎn)換為一系列的tokens令牌然后根據(jù)這些tokens渲染出HTML。我們要做的就是攔截這個(gè)渲染過程不生成HTML而是根據(jù)token類型構(gòu)建我們自己的樹形結(jié)構(gòu)。下面是一個(gè)簡化版的自定義渲染器實(shí)現(xiàn)它將Markdown轉(zhuǎn)換為一個(gè)嵌套的JSON數(shù)組function markdownToJSON(markdownText) { const tokens md.parse(markdownText, {}); const ast []; let currentList null; // 用于處理嵌套列表 const stack []; // 通用棧用于處理嵌套結(jié)構(gòu)如塊引用 // 一個(gè)輔助函數(shù)用于向當(dāng)前目標(biāo)ast或棧頂元素添加子節(jié)點(diǎn) const addChild (parent, node) { if (!parent.children) parent.children []; parent.children.push(node); }; for (let i 0; i tokens.length; i) { const token tokens[i]; const target stack.length 0 ? stack[stack.length - 1] : { children: ast }; switch (token.type) { case heading_open: const headingNode { type: heading, level: parseInt(token.tag.slice(1)), // h1 - 1 children: [] }; addChild(target, headingNode); // 標(biāo)題內(nèi)容在下一個(gè) inline token 里這里先推入棧等待內(nèi)容填充 stack.push(headingNode); break; case paragraph_open: const paraNode { type: paragraph, children: [] }; addChild(target, paraNode); stack.push(paraNode); break; case blockquote_open: const quoteNode { type: blockquote, children: [] }; addChild(target, quoteNode); stack.push(quoteNode); break; case bullet_list_open: case ordered_list_open: const listNode { type: list, ordered: token.type ordered_list_open, children: [] }; addChild(target, listNode); currentList listNode; // 列表本身也入棧用于容納 list_item stack.push(listNode); break; case list_item_open: const listItemNode { type: list_item, children: [] }; // 列表項(xiàng)應(yīng)該添加到當(dāng)前列表中 addChild(currentList, listItemNode); stack.push(listItemNode); break; case code_block: const codeNode { type: code_block, language: token.info ? token.info.trim() : plaintext, // 代碼語言 content: token.content }; addChild(target, codeNode); break; // code_block是自閉合的沒有_close token case fence: // 圍欄代碼塊和code_block類似但markdown-it有時(shí)用它 const fenceNode { type: code_block, language: token.info ? token.info.trim() : plaintext, content: token.content }; addChild(target, fenceNode); break; case inline: // 內(nèi)聯(lián)內(nèi)容文本、加粗、鏈接等需要進(jìn)一步處理其子token if (stack.length 0) { const currentNode stack[stack.length - 1]; currentNode.children currentNode.children.concat(processInlineTokens(token.children || [])); } break; case heading_close: case paragraph_close: case blockquote_close: case bullet_list_close: case ordered_list_close: stack.pop(); // 關(guān)閉一個(gè)塊級元素 if (token.type.includes(list_close)) { currentList null; // 列表關(guān)閉后重置 } break; case list_item_close: stack.pop(); break; // 可以繼續(xù)處理其他token類型table, hr等 } } return ast; // 返回完整的AST } // 處理內(nèi)聯(lián)token如加粗、斜體、鏈接、圖片 function processInlineTokens(tokens) { const result []; for (const token of tokens) { switch (token.type) { case text: result.push({ type: text, content: token.content }); break; case strong_open: result.push({ type: strong_open }); // 開始加粗標(biāo)記 break; case strong_close: result.push({ type: strong_close }); break; case em_open: result.push({ type: em_open }); // 開始斜體標(biāo)記 break; case em_close: result.push({ type: em_close }); break; case link_open: const linkNode { type: link, href: token.attrs.find(attr attr[0] href)[1], title: token.attrs.find(attr attr[0] title)?.[1], children: [] // 鏈接文本作為子節(jié)點(diǎn) }; result.push(linkNode); // 鏈接內(nèi)的文本需要后續(xù)的inline token填充這里簡化處理 // 實(shí)際需要更復(fù)雜的棧機(jī)制來處理內(nèi)聯(lián)嵌套 break; case image: const imgNode { type: image, src: token.attrs.find(attr attr[0] src)[1], alt: token.attrs.find(attr attr[0] alt)[1], title: token.attrs.find(attr attr[0] title)?.[1] }; result.push(imgNode); break; // ... 處理其他內(nèi)聯(lián)類型 } } // 注意這里返回的是一個(gè)扁平數(shù)組對于復(fù)雜的嵌套內(nèi)聯(lián)結(jié)構(gòu)如**加粗*斜體*加粗** // 需要更復(fù)雜的棧式處理來構(gòu)建樹。上述代碼是一個(gè)原理性簡化。 return result; }最終一段如## 這是一個(gè)標(biāo)題\n\n這是一段**加粗**文字。的Markdown會被轉(zhuǎn)換成類似下面的JSON結(jié)構(gòu)[ { type: heading, level: 2, children: [ { type: text, content: 這是一個(gè)標(biāo)題 } ] }, { type: paragraph, children: [ { type: text, content: 這是一段 }, { type: strong_open }, { type: text, content: 加粗 }, { type: strong_close }, { type: text, content: 文字。 } ] } ]這個(gè)結(jié)構(gòu)化的數(shù)據(jù)就是前后端約定的“合同”。后端API在收到AI回復(fù)后調(diào)用markdownToJSON函數(shù)然后將得到的AST JSON返回給前端即可。實(shí)操心得處理內(nèi)聯(lián)嵌套的“坑”上面示例代碼最大的簡化在于processInlineTokens函數(shù)。真實(shí)場景中內(nèi)聯(lián)標(biāo)記加粗、斜體、鏈接內(nèi)套其他樣式是嵌套的用一個(gè)簡單的循環(huán)無法構(gòu)建正確的樹形結(jié)構(gòu)。這里必須引入一個(gè)棧Stack來管理內(nèi)聯(lián)節(jié)點(diǎn)的開閉。當(dāng)遇到strong_open時(shí)創(chuàng)建一個(gè)新的“strong”節(jié)點(diǎn)并入棧后續(xù)的內(nèi)聯(lián)內(nèi)容都作為這個(gè)棧頂節(jié)點(diǎn)的子節(jié)點(diǎn)直到遇到strong_close才出棧。這是實(shí)現(xiàn)一個(gè)健壯解析器的關(guān)鍵細(xì)節(jié)也是很多自制解析器容易出錯(cuò)的地方。好在markdown-it提供的token流本身已經(jīng)隱含了嵌套關(guān)系仔細(xì)處理即可。4. 前端實(shí)現(xiàn)用組件化思維渲染結(jié)構(gòu)化數(shù)據(jù)后端已經(jīng)把一份清晰的“建筑圖紙”AST給了我們前端的工作就是用“預(yù)制構(gòu)件”Vue/React組件把這棟樓蓋起來。這個(gè)過程清晰、安全且完全可控。4.1 設(shè)計(jì)組件映射表首先我們需要根據(jù)AST中的節(jié)點(diǎn)類型type定義與之對應(yīng)的渲染組件。這就像一個(gè)路由表// 在Vue中的一種實(shí)現(xiàn)思路 // ComponentMapper.vue script setup import { h } from vue; import CodeBlock from ./CodeBlock.vue; import Paragraph from ./Paragraph.vue; import Heading from ./Heading.vue; import List from ./List.vue; import ListItem from ./ListItem.vue; import Blockquote from ./Blockquote.vue; import Text from ./Text.vue; // 處理純文本和簡單的內(nèi)聯(lián)格式如加粗、斜體 import Link from ./Link.vue; import Image from ./Image.vue; const componentMap { code_block: CodeBlock, paragraph: Paragraph, heading: Heading, list: List, list_item: ListItem, blockquote: Blockquote, text: Text, link: Link, image: Image, // ... 其他類型 }; const props defineProps([node]); const renderNode (node) { const Component componentMap[node.type]; if (!Component) { console.warn(No component mapped for type: ${node.type}, node); return null; } // 對于有子節(jié)點(diǎn)的組件遞歸渲染其子節(jié)點(diǎn) if (node.children node.children.length 0) { // 將子節(jié)點(diǎn)作為默認(rèn)插槽或特定prop傳遞給組件 // 這里假設(shè)組件通過 children prop 接收子節(jié)點(diǎn) return h(Component, { ...node, children: node.children.map(child renderNode(child)) }); } return h(Component, node); }; /script template div component :isrenderNode(node) / /div /template4.2 關(guān)鍵組件實(shí)現(xiàn)示例以最復(fù)雜的CodeBlock和Text處理內(nèi)聯(lián)格式組件為例CodeBlock.vue 它的職責(zé)是接收語言和代碼內(nèi)容并集成代碼高亮庫。template pre classcode-block :classlanguage-${language} code refcodeElslot //code !-- 代碼內(nèi)容通過插槽或prop傳入 -- /pre /template script setup import { ref, onMounted, nextTick } from vue; import Prism from prismjs; // 或 highlight.js import prismjs/themes/prism-tomorrow.css; // 引入樣式 // 按需加載語言定義 import prismjs/components/prism-javascript; import prismjs/components/prism-python; // ... 其他語言 const props defineProps({ language: { type: String, default: plaintext }, content: { type: String, default: } }); const codeEl ref(null); onMounted(() { nextTick(() { if (codeEl.value Prism) { Prism.highlightElement(codeEl.value); } }); }); /script style scoped .code-block { background: #f5f5f5; border-radius: 6px; padding: 1em; overflow-x: auto; margin: 1em 0; } /styleText.vue 它需要處理內(nèi)聯(lián)格式的嵌套。我們假設(shè)傳入的node結(jié)構(gòu)更精細(xì)例如{ type: ‘inline’, children: […] }其中children里包含了text、strong、em等節(jié)點(diǎn)。template span template v-for(child, index) in node.children :keyindex template v-ifchild.type text {{ child.content }} /template strong v-else-ifchild.type strong Text :nodechild / !-- 遞歸處理strong內(nèi)部可能還有em等 -- /strong em v-else-ifchild.type em Text :nodechild / /em Link v-else-ifchild.type link :hrefchild.href :titlechild.title Text :nodechild / !-- 鏈接文本 -- /Link !-- ... 處理其他內(nèi)聯(lián)類型如code, del等 -- /template /span /template script setup import Link from ./Link.vue; // 引入其他內(nèi)聯(lián)組件 const props defineProps({ node: { type: Object, required: true } }); /scriptLink.vue 這是一個(gè)安全控制的重點(diǎn)區(qū)域。template a :hrefsafeHref :titletitle :targettarget :relrel click.preventhandleClick slot / /a /template script setup import { computed } from vue; const props defineProps({ href: { type: String, required: true }, title: { type: String, default: } }); // 1. URL安全校驗(yàn) const safeHref computed(() { try { const url new URL(props.href); // 只允許 http 和 https 協(xié)議 if (![http:, https:].includes(url.protocol)) { console.warn(Unsafe protocol in link: ${props.href}); return javascript:void(0);; } // 可以在這里添加域名白名單檢查 // if (!isAllowedDomain(url.hostname)) { ... } return props.href; } catch { // 如果不是合法URL可能是相對路徑或錨點(diǎn) // 對于相對路徑需要結(jié)合你的路由策略處理這里簡單返回 return props.href.startsWith(#) ? props.href : #${props.href}; } }); // 2. 安全屬性設(shè)置 const target computed(() (isExternalLink.value ? _blank : null)); const rel computed(() (isExternalLink.value ? noopener noreferrer : null)); const isExternalLink computed(() { return safeHref.value.startsWith(http); }); // 3. 可控的點(diǎn)擊行為例如應(yīng)用內(nèi)路由跳轉(zhuǎn) vs 外鏈打開 const handleClick (event) { if (isExternalLink.value) { // 外鏈允許默認(rèn)行為新標(biāo)簽頁打開 // 可以在這里做點(diǎn)擊統(tǒng)計(jì)等 window.open(safeHref.value, _blank); } else { // 內(nèi)鏈?zhǔn)褂们岸寺酚商D(zhuǎn)阻止默認(rèn)的頁面刷新 event.preventDefault(); // 假設(shè)使用Vue Router // router.push(safeHref.value); console.log(Internal navigation to:, safeHref.value); } }; /script4.3 流式渲染與性能優(yōu)化對于AI流式輸出Server-Sent Events的場景我們的結(jié)構(gòu)化數(shù)據(jù)也可以分塊chunk返回。前端需要能夠增量式地更新AST并渲染。后端分塊 后端在流式接收AI響應(yīng)時(shí)可以按句子或段落進(jìn)行Markdown解析并發(fā)送一個(gè)個(gè)包含部分AST節(jié)點(diǎn)的數(shù)據(jù)塊。前端增量更新 前端維護(hù)一個(gè)完整的AST數(shù)組。每收到一個(gè)數(shù)據(jù)塊就將其解析并拼接到現(xiàn)有AST的末尾。然后觸發(fā)一次針對新增部分的渲染。虛擬列表 如果對話歷史非常長渲染所有消息會導(dǎo)致DOM節(jié)點(diǎn)過多影響性能。此時(shí)可以對整個(gè)對話歷史應(yīng)用虛擬列表技術(shù)只渲染可視區(qū)域內(nèi)的消息。對于單條很長的AI回復(fù)也可以考慮對渲染出的DOM節(jié)點(diǎn)進(jìn)行“局部虛擬化”但這復(fù)雜度較高通常優(yōu)先優(yōu)化AI回復(fù)的分塊粒度。一個(gè)簡單的增量更新示例使用Vue 3的響應(yīng)式系統(tǒng)// 在消息組件內(nèi)部 const messageAst ref([]); // 當(dāng)前消息的AST // 假設(shè)通過EventSource接收流 const eventSource new EventSource(‘/api/chat-stream’); eventSource.onmessage (event) { const chunkData JSON.parse(event.data); // 假設(shè)后端返回 { type: “ast_chunk”, ast: […] } if (chunkData.type ‘a(chǎn)st_chunk’) { // 將新解析出的AST片段追加到現(xiàn)有AST中 messageAst.value […messageAst.value, …chunkData.ast]; } };踩坑實(shí)錄樣式隔離與沖突在引入Prism.js或highlight.js進(jìn)行代碼高亮?xí)r我遇到了樣式?jīng)_突問題。這些庫會向code標(biāo)簽注入大量的span子元素并賦予特定的CSS類名如.token.keyword。如果項(xiàng)目本身使用了CSS-in-JS方案或者像Tailwind CSS這類使用高優(yōu)先級工具類的框架可能會覆蓋代碼高亮的樣式。解決方案是提升代碼高亮樣式表的優(yōu)先級或者將其放入 Shadow DOM 中進(jìn)行樣式隔離。一個(gè)更簡單實(shí)用的辦法是在包裹代碼塊的容器上添加一個(gè)特定的類名如.ai-markdown-content然后所有代碼高亮樣式都嵌套在這個(gè)類名下確保選擇器有足夠高的特異性。.ai-markdown-content pre code .token.keyword { color: #ff79c6 !important; /* 提高特異性必要時(shí)使用!important */ }5. 安全加固與內(nèi)容過濾構(gòu)建可信的渲染管道讓AI的回復(fù)以富文本形式渲染相當(dāng)于打開了一扇門。我們必須在這扇門口設(shè)置嚴(yán)格的安全檢查防止惡意內(nèi)容溜進(jìn)來。安全是底線絕不能妥協(xié)。5.1 輸入凈化后端的責(zé)任即使我們采用結(jié)構(gòu)化數(shù)據(jù)方案后端在生成AST之前對原始的AI回復(fù)進(jìn)行凈化仍然是必要的。標(biāo)記清洗 雖然我們禁用了HTML解析但有些Markdown擴(kuò)展語法或AI的“創(chuàng)造性”輸出可能包含類似HTML的標(biāo)簽。需要在解析前用一個(gè)簡單的正則表達(dá)式或?qū)ｉT的庫如sanitize-html的文本模式去除所有和字符之間的內(nèi)容或者將其轉(zhuǎn)義。// 一個(gè)簡單的轉(zhuǎn)義示例 function escapeRawHtml(rawText) { return rawText.replace(/[]/g, (c) c ‘’ ? ‘lt;’ : ‘gt;’); } // 在調(diào)用 markdownToJSON 之前 const safeMarkdown escapeRawHtml(aiRawResponse);鏈接安全 如前所述在markdown-it的validateLink鉤子中實(shí)施策略。只允許http://和https://開頭的鏈接。對于圖片鏈接甚至可以設(shè)置一個(gè)代理白名單防止盜鏈和潛在的不良內(nèi)容。數(shù)據(jù)大小限制 對單次AI回復(fù)的Markdown文本長度進(jìn)行限制防止超長內(nèi)容導(dǎo)致解析器性能下降或內(nèi)存溢出。5.2 輸出控制前端的防線前端是最后一道防線即便數(shù)據(jù)來自“可信”的后端也應(yīng)遵循安全最佳實(shí)踐。絕不信任輸入 對待后端傳來的AST數(shù)據(jù)也要進(jìn)行驗(yàn)證。例如檢查image.src是否是一個(gè)字符串link.href是否符合預(yù)期格式。雖然AST是我們自己定義的但防御性編程是有益的。組件級安全策略Link組件 如上文實(shí)現(xiàn)必須校驗(yàn)協(xié)議并為外鏈添加rel“noopener noreferrer”屬性防止window.opener漏洞。Image組件 可以考慮實(shí)現(xiàn)一個(gè)統(tǒng)一的圖片代理或懶加載組件在onError事件中替換為默認(rèn)占位圖防止外鏈圖片失效或包含不當(dāng)內(nèi)容。Iframe/腳本 在我們的場景中Markdown通常不應(yīng)解析出iframe或script。但如果未來支持自定義HTML塊必須徹底禁止這類標(biāo)簽。CSP內(nèi)容安全策略 在Web應(yīng)用層面配置嚴(yán)格的CSP HTTP頭是終極防護(hù)。它可以禁止內(nèi)聯(lián)腳本、限制資源加載的源如圖片、樣式、字體即使有惡意腳本被注入也無法執(zhí)行。Content-Security-Policy: default-src ‘self’; img-src ‘self’ https://trusted-cdn.com; style-src ‘self’ ‘unsafe-inline’; script-src ‘self’;這個(gè)策略表示默認(rèn)只允許加載同源資源圖片允許同源和https://trusted-cdn.com樣式允許同源和內(nèi)聯(lián)樣式某些代碼高亮庫可能需要腳本只允許同源。5.3 處理AI的“幻覺”與不規(guī)則標(biāo)記AI并非完美它可能生成不合規(guī)的Markdown例如未閉合的**加粗、嵌套混亂的列表甚至是一些自創(chuàng)的“偽Markdown”語法。解析器的容錯(cuò)性 選擇一個(gè)容錯(cuò)性好的解析庫markdown-it在這方面表現(xiàn)不錯(cuò)。它通常能自動修正一些常見的錯(cuò)誤比如將未配對的*視為普通星號字符。后處理與降級 在將AST返回給前端前可以遍歷AST進(jìn)行一次“清理”。例如發(fā)現(xiàn)一個(gè)strong_open節(jié)點(diǎn)沒有對應(yīng)的strong_close節(jié)點(diǎn)可以自動為其補(bǔ)全或者將整個(gè)段落降級為純文本節(jié)點(diǎn)。這比直接渲染出奇怪的樣式要好。前端降級渲染 在前端組件中如果遇到無法識別或結(jié)構(gòu)破損的節(jié)點(diǎn)類型應(yīng)有降級方案。例如Text組件遇到未知的內(nèi)聯(lián)節(jié)點(diǎn)可以將其內(nèi)容作為純文本渲染并記錄錯(cuò)誤日志而不是直接崩潰或渲染空白。安全紅線關(guān)于dangerouslySetInnerHTML的警示如果你的方案是后端返回HTML字符串前端使用v-html或dangerouslySetInnerHTML那么你必須使用像DOMPurify這樣的庫在客戶端進(jìn)行二次凈化。永遠(yuǎn)不要相信后端傳來的、未經(jīng)凈化的HTML。DOMPurify可以配置一個(gè)非常嚴(yán)格的允許標(biāo)簽和屬性列表過濾掉所有危險(xiǎn)元素和事件處理器。即便如此混合方案中后端生成HTML的方式其安全風(fēng)險(xiǎn)和維護(hù)成本依然高于結(jié)構(gòu)化數(shù)據(jù)方案。我個(gè)人強(qiáng)烈推薦后者。6. 擴(kuò)展與優(yōu)化讓渲染引擎更強(qiáng)大基礎(chǔ)功能實(shí)現(xiàn)后我們可以著眼于此方案的擴(kuò)展?jié)摿ψ屗粌H能渲染標(biāo)準(zhǔn)Markdown還能適應(yīng)更豐富的交互需求。6.1 支持?jǐn)U展語法與自定義組件AI的應(yīng)用場景多樣有時(shí)我們可能希望它返回一些標(biāo)準(zhǔn)Markdown不支持的元素比如一個(gè)可交互的按鈕、一個(gè)進(jìn)度條、或一個(gè)特殊的數(shù)據(jù)圖表。定義自定義容器 可以利用Markdown的擴(kuò)展語法比如圍欄代碼塊的變種。例如約定:::warning和:::之間包裹的內(nèi)容渲染為警告提示框。:::warning 這是一條重要的警告信息。 :::后端解析器需要識別這種自定義語法并在AST中生成一個(gè)type: ‘custom_warning’的節(jié)點(diǎn)。前端注冊自定義組件 在前端的componentMap中為custom_warning注冊一個(gè)WarningBox.vue組件。這個(gè)組件可以有自己的樣式和圖標(biāo)實(shí)現(xiàn)豐富的渲染效果。屬性傳遞 甚至可以支持更復(fù)雜的語法從標(biāo)記中提取屬性。例如:::chart type“l(fā)ine” data“{...}” :::后端解析出type和data屬性前端Chart組件接收這些屬性并渲染對應(yīng)的圖表。6.2 代碼塊的深度交互代碼塊不僅僅是靜態(tài)高亮我們可以讓它變得有用。一鍵復(fù)制 在CodeBlock組件右上角添加一個(gè)復(fù)制按鈕點(diǎn)擊后使用navigator.clipboard.writeTextAPI將代碼內(nèi)容復(fù)制到剪貼板。語言檢測與切換 如果AI返回的代碼塊未指定語言或語言不準(zhǔn)確前端可以集成一個(gè)輕量級的語言檢測庫如highlight.js的highlightAuto提供“檢測語言”或“切換語言”的選項(xiàng)。代碼執(zhí)行沙盒環(huán)境 對于某些教育或演示場景如果代碼是JavaScript且經(jīng)過嚴(yán)格安全審查可以考慮在iframe沙盒中安全地運(yùn)行它展示運(yùn)行結(jié)果。這是一個(gè)高風(fēng)險(xiǎn)功能必須極其謹(jǐn)慎通常僅用于完全可控的內(nèi)部環(huán)境。6.3 性能與可訪問性圖片懶加載 對Image組件實(shí)現(xiàn)懶加載使用Intersection Observer API監(jiān)聽圖片是否進(jìn)入視口再加載真實(shí)圖片源提升首屏速度。可訪問性A11y為CodeBlock添加role“code”和aria-label屬性描述代碼塊的作用。確保Heading組件生成正確的h1到h6標(biāo)簽并保持層級結(jié)構(gòu)方便屏幕閱讀器導(dǎo)航。為Link組件提供清晰的鏈接文本避免使用“點(diǎn)擊這里”這種模糊的描述。深色模式適配 代碼高亮主題、邊框顏色、背景色等都需要適配深色模式?？梢酝ㄟ^CSS變量Custom Properties來定義顏色主題使切換變得容易。實(shí)現(xiàn)AI回復(fù)的Markdown渲染遠(yuǎn)不止是調(diào)用一個(gè)庫那么簡單。它是一次對數(shù)據(jù)流、安全模型和用戶體驗(yàn)的綜合設(shè)計(jì)。從最初在后端返回HTML的簡單想法到最終確立“結(jié)構(gòu)化數(shù)據(jù) 前端組件化渲染”的混合架構(gòu)這個(gè)過程讓我深刻體會到在追求功能的同時(shí)安全性、可維護(hù)性和未來擴(kuò)展性必須作為同等重要的考量因素。現(xiàn)在當(dāng)看到AI生成的復(fù)雜步驟清單、格式清晰的代碼示例或數(shù)據(jù)表格能夠在前端完美地呈現(xiàn)出來時(shí)那種體驗(yàn)的提升是實(shí)實(shí)在在的。這個(gè)方案也為后續(xù)集成更豐富的交互元素如可折疊的詳情塊、內(nèi)嵌的簡單圖表鋪平了道路讓AI與用戶的對話界面真正成為一個(gè)強(qiáng)大而美觀的信息交付平臺。