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