HTML中嵌入JSON的合法方式仅有两种：推荐使用<script type="application/json">，其次可用<template>；其他裸写法存在XSS风险且不可靠。
HTML 里直接嵌入 JSON 数据本身没有“HTML JSON 格式”这种标准说法——你看到的所谓“HTML JSON 美化”，本质是把一段 JSON 字符串（比如 script 标签里的 type="application/json" 内容）用 HTML 页面渲染出来，并做语法高亮、折叠、缩进等可视化处理。选工具前先分清场景：你是想在浏览器里调试内联 JSON？还是把 JSON 输出到 HTML 页面供用户查看？或是开发中需要预览 JSON 响应？
JSON 在 HTML 中的合法嵌入方式只有两种
别用 <div>{ "name": "foo" }</div> 这种裸写法，既不语义化，也不安全（XSS 风险），更没法被程序可靠读取。
-
<script type="application/json" id="config">{"theme":"dark","lang":"zh"}</script>—— 最推荐。浏览器不会执行，JS 可用document.getElementById('config').textContent安全读取 -
<template id="data">{"items":[1,2,3]}</template>—— 兼容性稍差（IE 不支持），但内容不渲染、不执行，适合结构化数据暂存
其他方式（如藏在 data- 属性、textarea、注释里）要么容量受限，要么解析麻烦，不建议常规使用。
浏览器控制台里看 JSON 就够用了，别迷信“美化工具”
Chrome/Firefox 控制台对 console.log() 输出的 JSON 对象自动展开、高亮、可搜索。如果你只是调试，根本不需要额外工具。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 遇到
Uncaught SyntaxError: Unexpected token < in JSON at position 0？大概率是后端返回了 HTML 错误页（比如 404），不是 JSON 本身格式问题 - 看到乱码或中文显示为
\uXXXX？检查响应头是否含Content-Type: application/json; charset=utf-8 - 用
fetch().then(r => r.json())报错？先用r.text()打印原始响应体，确认是不是真 JSON
真要生成可读 HTML 页面展示 JSON，用轻量脚本比在线工具靠谱
在线美化网站（如 json.cn、jsonformatter.org）适合临时粘贴查看，但无法集成到项目中，也不能处理大文件或敏感数据。自己加几行 JS 就能搞定：
const jsonEl = document.getElementById('json-data');
const obj = JSON.parse(jsonEl.textContent);
jsonEl.innerHTML = '<pre><code class="json">' +
Prism.highlight(JSON.stringify(obj, null, 2), Prism.languages.json, 'json') +
'</code></pre>';
依赖 Prism.js 或 highlight.js 即可，体积小、无网络请求、可控性强。注意：JSON.stringify(obj, null, 2) 的第二个参数（replacer）必须显式传 null，否则自定义 toJSON 方法可能被忽略。
真正容易被忽略的是 JSON 数据来源的可信度——无论用什么工具美化，如果原始 JSON 是用户提交、未校验的输入，直接 innerHTML 渲染就等于开 XSS 后门。宁可用 textContent 显示原始字符串，或严格白名单过滤后再 parse。
