html代码块中写显示为空盒子，是因为浏览器将其解析为真实标签并渲染成dom节点，而非文本；必须对、&等特殊字符完整转义，或用textcontent、highlight.js等方案安全展示。
HTML代码块里写<div>为什么显示成空盒子
<p>因为浏览器会把<code><div>当成真实标签解析并渲染，而不是显示为文本。你看到的“空盒子”其实是它被实际创建出来的DOM节点，不是高亮结果。
<p>解决办法只有一个：必须对HTML特殊字符做转义。常见错误是只转义<code>&，漏掉和<code>>。
→ <code><-
> → >
-
& → &
→ <code><> → >
& → &
比如想显示<div class="card">Hello</div>，得写成：<div class="card">Hello</div>。手动转义容易出错，建议用textContent或document.createTextNode()插入，或者用highlight.js这类库自动处理。
用highlight.js高亮HTML结构代码时class不生效
原因很直接：highlight.js默认只加载核心语言支持，html语法高亮需要显式引入对应语言文件。
如果你用了highlight.min.js但没加highlightjs/lib/languages/xml.js或highlightjs/lib/languages/html.js，那<tag></tag>部分根本不会被识别，自然也不会加hljs-tag这类class。
- 确认是否调用
hljs.highlightElement(el)前已注册HTML语言：hljs.registerLanguage('html', hljsLanguages.html) - 检查
<pre class="brush:php;toolbar:false;"><code class="html">...</code></pre>中class拼写是否正确，不能写成lang-html或html-lang - 如果用CDN，选带
all languages的完整包，或单独引入html.js和xml.js（HTML高亮依赖XML解析器）
用prism.js时<script></script>标签内容被浏览器提前执行
这是最危险也最容易被忽略的问题：当<pre class="brush:php;toolbar:false;"><code class="html"><script>alert(1)</script></code></pre>被插入DOM时，浏览器可能在Prism解析前就执行了里面的<script></script>——哪怕它只是代码示例。
根本解法不是靠Prism配置，而是从源头切断执行链：
- 永远用
textContent设置代码内容，别用innerHTML - 如果必须用字符串插入，先用
document.createElement('template')包裹再取textContent，避免解析 - 服务端输出时就做好HTML实体转义，前端不再信任原始字符串
Prism本身不防XSS，它只负责染色；执行风险在DOM插入阶段就已经产生。
自定义CSS让<title></title>和<meta>在高亮中更易读
默认高亮对里那些没有闭合标签、属性值又短的元素（如<title></title>、<meta name="viewport">）区分度很低，全挤成hljs-tag和hljs-attr，看着费劲。
可以针对性加CSS增强语义识别：
.hljs-title {
color: #007acc;
font-weight: bold;
}
.hljs-meta {
color: #a31515;
}
.hljs-meta-keyword {
color: #af00db;
}
前提是你的高亮库生成了对应class。比如highlight.js对<title></title>会加hljs-tag，但不会单独标title；要实现上面效果，得配合自定义语言定义，或用afterHighlight钩子动态加class——这点很多人卡住，以为配CSS就行，其实底层没输出对应class，样式再漂亮也没用。
