在 AI 生成的 Markdown 文本中，如果含有代码块，前端一般通过什么方式解析并为其实现语法高亮？请说明解析到渲染的完整流程。

回答思路

1. 【回答框架 1】前端通常先用 Markdown 解析库将原始 Markdown 字符串转为 HTML，主流选择有 marked、remark（unified 生态）、markdown-it 等。解析时需配置代码块规则，使代码块被转换为包含 language 类的 pre/code 结构，例如 <pre><code class="language-js">。
2. 【回答框架 2】完成 HTML 转换后，代码高亮由独立的语法高亮库执行，常见有 highlight.js、Prism、Shiki 等。他们基于代码块中的 language 类识别语言并应用词法分析，将代码文本切分为 token 序列，再映射到预定义的主题样式，最终输出带 span 标签的着色 HTML。
3. 【回答框架 3】为提高性能，可在客户端渲染时避免对非代码部分做高亮，只针对 code 元素处理；同时可使用懒加载或按需引入语言包，减小打包体积。若采用服务端渲染，可在服务端提前完成高亮，客户端直接展示。
4. 【回答框架 4】具体到 React 等框架，还可使用 react-markdown 配合 remark-highlight.js 或 react-syntax-highlighter 等封装组件，简化集成。关键点是确保解析和高亮两阶段的数据一致，避免出现 HTML 被二次转义的问题。
5. 【关键点 1】Markdown 解析负责将代码块转为带 language 类的 HTML，常用库有 marked、markdown-it、remark。
6. 【关键点 2】代码高亮依赖 highlight.js、Prism 或 Shiki 等库，通过词法分析生成着色 HTML。
7. 【关键点 3】性能优化可采用按需引入语言包、懒加载、服务端预渲染等手段。
8. 【易错点 1】高亮库对语言名的识别可能存在差异，需统一 language 类与库支持语言的映射。
9. 【易错点 2】直接对 HTML 字符串做高亮可能引发 XSS 风险，应使用经过安全处理的解析结果。