请阐述在AI爆款文章创作器项目中，你是如何实现Markdown渲染和代码高亮的？

回答思路

1. 【回答框架 1】Markdown渲染的核心是将Markdown文本解析为HTML，常用库包括marked、markdown-it等。在Vue项目中，通常封装一个Markdown组件，通过marked或markdown-it将文本转为HTML，再借助v-html插入页面，同时需注意XSS风险，可配合DOMPurify进行安全过滤。
2. 【回答框架 2】代码高亮常与Markdown渲染配合，使用highlight.js或prism.js。在Renderer解析代码块时，识别语言类型，调用高亮库生成带class的HTML，并引入对应主题CSS。若使用markdown-it，可直接集成highlight.js插件，在代码块渲染时触发高亮逻辑。
3. 【回答框架 3】在项目实现中，我们使用了markdown-it作为解析器，并配置了highlight.js进行代码高亮。具体做法是：在markdown-it的构造函数中设置highlight函数，该函数接收代码和语言，若语言合法则调用highlight.js的highlight方法，返回包裹了class的HTML，否则使用escapeHtml转义。同时，通过CSS引入github主题样式，保证美观。
4. 【回答框架 4】性能优化方面，对于长文档可采用懒加载或分片渲染，避免一次性渲染大量代码导致卡顿。代码高亮本身有开销，可考虑仅对可见区域高亮，或使用虚拟滚动。此外，缓存解析结果，避免重复解析相同内容。
5. 【关键点 1】Markdown渲染使用markdown-it或marked，转化为HTML后用v-html绑定。
6. 【关键点 2】代码高亮使用highlight.js或prism.js，在markdown-it中通过highlight函数实现。
7. 【关键点 3】需处理XSS注入，使用DOMPurify或类似库过滤。
8. 【易错点 1】v-html直接插入未过滤的HTML可能导致XSS漏洞。
9. 【易错点 2】代码高亮库体积较大，需按需加载或懒加载以优化。
10. 【易错点 3】markdown-it的highlight函数中，若语言未识别，需调用escapeHtml避免脚本执行。