真正能撑住现场演示的是<pre><code>嵌套+预设CSS；单行用code，多行用<pre><code>；<、>、&须转义；缩进用空格；<pre>需限制max-width并设overflow-x:auto。
技术演讲稿里代码显示不清晰，不是字体太小就是缩进错乱，根本没法让观众看清——code 标签单独用，基本等于没用；真正能撑住现场演示的，只有 <pre><code> 嵌套 + 预设 CSS 控制。
单行命令或函数名必须用 code，别塞进 <pre>
演讲中解释调用逻辑时，比如“传入 AbortSignal.timeout(5000)”，这种必须用纯 code。它语义明确、行高正常、和周围文字对齐，屏幕阅读器会读作“AbortSignal dot timeout 函数”。
- 错误做法：
<pre><code>AbortSignal.timeout(5000)</code></pre>→ 上下多出大段空白，PPT 里直接挤掉两行内容 - 漏转义
<或>会导致标签被浏览器解析，比如写useState<string>却没转义成useState<string>，后面所有 HTML 都可能错位 - 别给
code加white-space: pre—— 它本就不换行，加了反而让长命令横向溢出幻灯片边界
多行代码块必须嵌套 <pre><code>，且 class 要带语言标识
展示 React Hook 或 fetch 调用片段时，<pre> 保留缩进和换行，<code> 声明这是代码（不是普通预格式文本），class 属性则告诉 Prism.js 或 highlight.js 该按什么规则上色。
- 正确结构：
<pre><code class="js">const data = await fetch('/api').then(r => r.json());</code></pre> - class 名推荐用
language-js、language-sh、language-json，而非简写js或sh，避免某些高亮库识别失败 - 如果 PPT 渲染环境不支持 JS 高亮库，至少确保
<pre>有overflow-x: auto和tab-size: 2，否则缩进塌成一团，观众完全看不出嵌套层级
演讲场景下最常忽略的三个排版细节
不是代码写得不对，而是渲染出来观众根本读不懂——问题全出在 HTML 结构和字符转义上。
立即学习“前端免费学习笔记（深入）”；
-
<、>、&必须手动转义，哪怕只是写个泛型Array<number>或路径/user/:id&tab=profile，漏一个就会导致 DOM 解析中断 - 缩进统一用空格（2 或 4 个），别用 Tab 键——不同编辑器、不同 PPT 导出工具对 Tab 宽度渲染不一致，同一段代码在你本地对齐，投到大屏就错位
-
<pre>外层容器要限制 max-width，否则长代码行撑满整个幻灯片，右侧关键内容被裁掉，观众只能看到一半
真正决定观众能不能看懂的，从来不是代码本身有多酷，而是 <pre> 和 <code> 的职责有没有分清：一个管“怎么显示”，一个管“这是什么”。混用一次，现场演示就可能卡壳三秒——而这三秒，足够让注意力彻底流失。
