打印HTML代码需先转义实体（<→
打印前先转义 HTML 实体，否则浏览器直接渲染
浏览器遇到 <div>hello</div> 会把它当标签解析，而不是显示成文字。想原样打印出来，必须把 <、>、& 这几个字符替换成对应 html 实体。
常见错误现象：document.write('<div>test</div>') 页面只显示“test”，没看到任何标签；或者用 innerText 赋值后，复制出来是纯文本，丢失了尖括号结构。
-
<→ -
>→> -
&→&
简单函数示例：
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>—— 它默认保留空白符和换行 - 内层套
<code>—— 表明这是代码内容，通常自带等宽字体 - 别忘了先 escape，再塞进去，顺序错了照样被解析
正确写法示例：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
<pre><code class="html"><header> <h1>Title</h1> </header></code></pre>
打印样式要重置 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 能绕过用户确认强制启用。
