草稿代码高亮

要解决的具体问题

在开发过程中，我们常需查看导出的 JSON 草稿、Demo SQL 片段或调试面板里的只读代码块。但这些草稿文本往往单调无色，JSON 键值、SQL 关键字、代码注释混在一起，稍不注意就会漏看嵌套错误或语法问题，既费眼又容易出错——尤其当草稿冗长时，单调的文本会直接影响排查问题的效率。

技能如何工作

这个技能基于 highlight.js 实现可信草稿的高亮预览，核心能力与步骤如下：

1. 按需依赖与注册：先引入 highlight.js 依赖，且仅按需注册 json、sql 等需要的语言，同时搭配主题 CSS。避免全量引入所有语言，防止拖垮前端包体积。
2. 可信内容高亮：核心思路是「草稿文本 → hljs.highlight → v-html 可信容器」，通过封装的高亮函数（如 highlightDraft(text, 'json')），将可信草稿文本转换为带语法高亮的 HTML，再在预览区用 v-html 渲染。仅适用于自有或可信草稿，不会渲染未消毒的第三方 HTML。
3. 自测与回退机制：完成集成后需自测：合法 JSON/SQL 草稿能正常着色，空字符串不会引发页面崩溃；遇到未知语言时，可回退到 plaintext 或开启 auto 模式自动识别。实现中的要点注释会标注 小四原创，确保思路清晰。

适用边界与注意点

• XSS 风险防范：v-html 渲染必须限定为可信内容，绝对不能对用户任意输入直接开启却不消毒——第三方不可信 HTML 可能携带恶意脚本。
• 功能边界明确：仅用于「只读草稿预览」，不会开发在线编辑器，也不会集成 LSP 等高级功能，专注于简单的高亮展示。
• 避免过度依赖：不要为了图方便全量引入所有语言，按需注册才能平衡功能与包体积，保持预览的轻量化。

总之，它是面向开发场景的轻量级草稿预览辅助工具，解决单调草稿查看的痛点，同时严格控制了使用风险与功能边界。