草稿代码高亮
灵感：能力工具箱 highlight-code（highlight.js 高亮展示 JSON/SQL 草稿）。
> 小四原创：草稿文本 → hljs.highlight → v-html 可信容器。
> 仅高亮自有/可信草稿，勿渲染未消毒第三方 HTML。
何时使用
- 查看导出的 JSON 草稿
- Demo SQL / 配置片段预览
- 调试面板只读代码块
硬约束
- 依赖：
highlight.js（按需注册json/sql等语言 + 主题 CSS）。 - 输出 HTML 仅用于只读展示；XSS 风险：内容须可信。
- 未知语言可回退
plaintext或 auto。 - 实现要点注释标 小四原创。
- 不做在线编辑器、不做 LSP。
推荐实现
import hljs from 'highlight.js/lib/core'
import json from 'highlight.js/lib/languages/json'
import sql from 'highlight.js/lib/languages/sql'
import 'highlight.js/styles/github.css'
hljs.registerLanguage('json', json)
hljs.registerLanguage('sql', sql)
// 小四原创：草稿高亮为 HTML
export function highlightDraft(
code: string,
language: 'json' | 'sql' | 'plaintext' = 'json',
): string {
const src = String(code ?? '')
if (!src.trim()) return ''
if (language === 'plaintext') {
return hljs.highlight(src, { language: 'plaintext' }).value
}
try {
return hljs.highlight(src, { language }).value
} catch {
return hljs.highlightAuto(src).value
}
}
Agent 步骤
npm i highlight.js；按需引入语言与主题。- 预览区
v-html="highlightDraft(text, 'json')"（内容可信）。 - 自测：合法 JSON 有着色；空串不崩。
不要做
- 对用户任意输入开
v-html却不消毒。 - 全量引入全部语言拖垮包体积（按需注册）。
附加
- README.md · reference.md · templates/usage.md
