在Vue3项目中集成AI大模型时，我发现返回结果的代码块内容无法显示——页面留白但无报错。排查发现是AI返回的代码块缺少语言类型标识（如```js），导致markdown解析器无法触发语法高亮。通过以下方案即可快速解决：
🔍 问题复现场景
当AI返回如下未指定语言类型的markdown内容时：
⚙️ 根本原因分析
Vue3常用的markdown解析器（如marked + highlight.js）依赖三个要素实现代码高亮：
- 有效的代码块标记（`````）
- 明确的语言类型标识（如
js、python） - 已注册的语言高亮规则
AI返回的代码块若缺失语言类型标识，解析器会直接跳过渲染流程，造成内容“静默消失”。
🛠️ 解决方案：强制指定默认语言
在初始化语法高亮库时，设置plaintext为默认语言类型（兼容无标识的代码块）：
✅ 效果对比
| 场景 | 渲染结果 |
|---|---|
| 未处理前（缺语言标识） | 空白区块（内容丢失） |
配置plaintext后 | 代码块以纯文本形式正确显示 |
优化后页面效果：
虽然无语法高亮，但内容完整可读，避免了信息丢失。
💡 扩展优化建议
-
AI提示词调整： 在请求AI时添加提示，要求返回代码块时附带语言类型（如："请用```js包裹JavaScript代码"）
-
智能语言检测： 用
highlight.js的highlightAuto加强自动识别：javascript复制代码
hljs.highlightAuto(code, ['js','ts','python']).value // 限定常见语言范围 -
组件级兜底处理： 在渲染组件中增加空值保护：
vue复制代码
<template> <div v-html="parsedContent || '无内容'" /> </template>
经验提示：该问题常见于动态生成markdown的场景（如AI对话、富文本编辑），需特别注意内容协议的完整性。
