打印HTML代码需先转义实体（
打印前先转义 HTML 实体，否则浏览器直接渲染
浏览器遇到 <div>hello</div> 会把它当标签解析，而不是显示成文字。想原样打印出来，必须把 、<code>>、& 这几个字符替换成对应 html 实体。
常见错误现象：document.write('<div>test</div>') 页面只显示“test”，没看到任何标签；或者用 innerText 赋值后，复制出来是纯文本，丢失了尖括号结构。
→ <code><-
>→> -
&→&
简单函数示例：
function escapeHtml(str) {
return str
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>');
}
console.log(escapeHtml('<button onclick="alert(1)">Click</button>'));
// 输出：<button onclick="alert(1)">Click</button>
用 pre + code 标签包裹，保留缩进和换行
纯文本放进 div 或 p 里，连续空格会被合并，换行会被忽略。要让代码像编辑器里那样对齐，必须用语义正确的容器。
使用场景：在文档页、调试面板、后台预览区展示 HTML 片段。
立即学习“前端免费学习笔记（深入）”；
- 外层用
<pre class="brush:php;toolbar:false;"></code> —— 它默认保留空白符和换行</li> <li>内层套 <code><code></code> —— 表明这是代码内容，通常自带等宽字体</li> <li>别忘了先 escape，再塞进去，顺序错了照样被解析</li> </ul> <p>正确写法示例：</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/ai/872" title="Napkin AI"><img src="https://img.php.cn/upload/ai_manual/000/000/000/175679986368475.png" alt="Napkin AI" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/ai/872" title="Napkin AI">Napkin AI</a> <p>Napkin AI 可以将您的文本转换为图表、流程图、信息图、思维导图视觉效果，以便快速有效地分享您的想法。</p> </div> <a href="/ai/872" title="Napkin AI" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"><code class="html"><header> <h1>Title</h1> </header></code></pre> <h3>打印样式要重置 <code>pre和code的默认边距与字体浏览器对
pre默认有上下 margin，code可能太小或颜色浅，直接打印出来容易切掉头尾、看不清标签名。性能 / 兼容性影响：不用 CSS 打印媒体查询的话，多数浏览器会按屏幕样式直接输出，而屏幕样式往往没考虑纸面阅读体验。
- 加
@media print规则，强制设置font-size: 10pt以上 - 清除
pre的margin，设padding: 8px防边缘裁剪 - 指定
font-family: 'SFMono-Regular', Consolas, monospace，避免某些系统 fallback 到衬线字体
关键 CSS 片段：
@media print { pre, code { font-size: 10pt; margin: 0; padding: 8px; font-family: Consolas, 'Courier New', monospace; } }Chrome 打印时禁用“背景图形”会导致
code高亮失效很多开发者用插件或 JS 动态加高亮（比如
highlight.js），但 Chrome 默认打印设置里勾选了“背景图形”，一旦取消，所有background-color都不出现，高亮就变白底黑字，完全看不出结构。容易踩的坑：以为是代码没生效，反复检查 JS，其实只是打印选项关了。
- 打印预览界面点右上角「更多设置」→ 勾选「背景图形」
- 如果必须关闭背景图形（比如省墨），那就改用边框模拟高亮：
border-left: 4px solid #ff6b6b - 不要依赖
box-shadow打印，它在多数浏览器打印模式下被忽略
真正麻烦的是：这个设置不保存，每次都要手动开。没有 API 能绕过用户确认强制启用。
- 加
