直接用<code>包JSON会出问题，因HTML特殊字符未转义导致解析错误；安全做法是先HTML实体编码再嵌入<pre><code>中。
为什么直接用 <code> 包 JSON 会出问题
浏览器默认把 JSON 里的花括号 {}、冒号 :、引号 " 当成普通文本渲染，但若 JSON 字符串里含未转义的 HTML 特殊字符（比如 <、>、&），就会被误解析成标签或实体——结果页面显示不全、格式错乱，甚至脚本执行失败。
真正安全的做法是先对 JSON 字符串做 HTML 实体编码，再塞进 <code>；或者用 <pre><code> 套一层保留换行缩进。
正确写法：用 <pre><code> + 手动转义
这是最轻量、兼容性最好的方案，不需要引入任何库：
- 把原始 JSON 字符串中的
<替换成，<code>>→>，&→& - 用
<pre><code class="json">...</code></pre>包裹，保证空格/换行不被压缩 - 如果只是临时展示、不追求语法高亮，class 属性可省略
{
"name": "Alice",
"age": 30,
"tags": ["web", "json", "html"]
}
常见翻车点：复制粘贴 JSON 到 HTML 时漏转义
以下写法看着像 JSON，实际在浏览器里会崩：
立即学习“前端免费学习笔记（深入）”；
<code>{"error": "<script>alert(1)</script>"}</code> → <script> 被执行或截断
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
<code>{"url": "https://a.com?q=1&p=2"}</code> → & 被当成 HTML 实体起始符，后续内容消失
只要 JSON 值里可能含 <、>、&，就必须转义。别信“我这数据很干净”——用户输入、日志注入、第三方 API 返回都不可控。
想加语法高亮？别硬套 JS 库，先确认是否真需要
纯静态页面加 highlight.js 或 Prism 会多一次 HTTP 请求、阻塞渲染，且要手动调用 hljs.highlightElement()。
更务实的选择：
- 开发期：用 VS Code 插件导出带样式的 HTML 片段，粘贴到文档里
- 构建期：用
jq命令行工具格式化 + 转义：jq -c . data.json | sed 's/&/\&/g; s/\</g; s/>/\>/g' - 运行时：只对用户可控的 JSON（如表单预览）做简单转义+
<pre><code>，放弃高亮
JSON 展示的核心诉求是“准确”和“可读”，不是“好看”。缩进和颜色只是锦上添花，一旦影响稳定性，就该砍掉。
