直接修改 pre 和 code 的 CSS 即可提升 HTML 源码可读性：设 white-space: pre-wrap、tab-size: 2/4、等宽字体栈、line-height: 1.5、深灰背景（#2d2d2d）、浅灰文字（#e0e0e0）、1px 边框与 4px 圆角、20px 内边距。
直接改 pre 和 code 标签的 CSS 就能控制 HTML 源码在网页里的可读性，不需要 JS 渲染或服务端预处理。
用 white-space 保留原始换行和缩进
浏览器默认会把连续空格、制表符、换行全压缩成一个空格。要显示真实缩进结构，必须显式设置 white-space：
-
white-space: pre：保留空格和换行，但不自动换行（长行会撑破容器） -
white-space: pre-wrap：保留空格和换行，且允许长行自动折行（最常用） -
white-space: pre-line：合并连续空格，但保留换行（适合纯文本段落，不适合代码）
推荐对 pre 元素统一设为 pre-wrap，再配合 overflow-x: auto 防止横向溢出。
字体选等宽 + 行高调到 1.4–1.6
非等宽字体（如 Arial、Times）会让 HTML 标签对齐错乱，<div> 和 </div> 看起来就不在垂直线上。
立即学习“前端免费学习笔记（深入）”；
- 用
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace这类栈式声明，兼顾系统兼容性 -
line-height: 1.5是平衡可读性和密度的甜点值；低于 1.3 容易粘连，高于 1.8 显得松散 - 避免用
font-size: 12px以下——小字号+等宽字体在高分屏上极易糊成一片
加背景色和边框但别用纯黑底白字
纯黑背景（#000）配纯白文字（#fff）对比度过高，长时间阅读会视觉疲劳，尤其在暗光环境。
- 推荐深灰背景：
background-color: #2d2d2d（VS Code 默认深色主题底色） - 文字用浅灰而非纯白：
color: #e0e0e0（保留层次感，避免刺眼） - 加 1px 边框和圆角：
border: 1px solid #444+border-radius: 4px，让代码块有边界感 - 别给
pre加padding太大——20px 已足够，否则缩进会被“吃掉”一层
关键细节：不要忽略 tab-size
HTML 源码里大量使用 Tab 缩进，但浏览器默认把 Tab 当作 8 个空格，导致缩进过宽、层级错位。
- 必须显式设置
tab-size: 2或tab-size: 4（根据团队规范） - 这个属性只对
pre和code生效，且不被 IE 支持（但 IE 已淘汰） - 如果用了 Prettify、Prism 等高亮库，确认它们没覆盖你的
tab-size值——有些库会强制重置
真正影响阅读体验的不是炫酷动画或复杂语法树，而是空格是否对齐、Tab 是否按预期展开、换行是否自然折断——这些细节一旦设错，整段 HTML 就像被揉皱后又摊开的纸，结构还在，但没人想细看。
