code标签仅用于标记行内代码片段，需与pre组合并转义特殊字符、添加CSS样式才能在幻灯片中正确显示多行高亮代码。
code 标签本身不是用来“制作幻灯片”的，它只是 HTML 中用于标记**行内代码片段**的语义化标签。你在技术分享幻灯片里看到的高亮代码块，几乎从来不是靠单独一个 标签实现的——它必须配合 CSS 样式、包裹结构，甚至 JS 渲染逻辑才能真正可用。
下面直说怎么在纯 HTML/CSS/JS 幻灯片中正确用好 <code>，避免常见翻车点。
<h3>为什么直接写 <code>console.log("hello") 在幻灯片里会出问题
浏览器默认对
标签只做极简样式处理：等宽字体 + 小号字号 + 无背景 + 无换行控制。放在幻灯片里，尤其含多行、特殊字符（如 <、>、&）、缩进或长行时，会立刻崩：文字溢出、尖括号被解析成 HTML 标签、空格塌陷、移动端看不清。</p> <ul> <li>典型错误现象：<code><div class="container">渲染成空 div，因为 被当成标签起始/结束符
< 替代 > 替代 >，& 替代 &）的 white-space 行为，默认是 normal，导致缩进丢失</li> </ul> <h3>正确包裹方式：用 <code>pre+
code 组合
这是 W3C 推荐的语义组合：pre 保证保留空白与换行，code 声明内容为代码。二者嵌套才是技术幻灯片里写代码块的底线写法。
- 结构必须是：
<pre><code>...</code></pre>，不能只用code或只用pre - 必须手动转义：所有
<、>、&都要写成对应 HTML 实体（可借助document.createTextNode().textContent或简单 replace 辅助） - CSS 至少加：
pre { margin: 0; padding: 1rem; background: #2d2d2d; overflow-x: auto; } code { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 0.9em; color: #f8f8f2; }
想支持语法高亮？别手写正则，用 Prism.js 或 highlight.js
在幻灯片场景下，自己写正则匹配关键字高亮极易出错（比如字符串里的关键词、注释干扰），且增加 JS 加载负担。用成熟库更稳。
- 引入方式（CDN 最简）：
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet"/>+<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script> - 关键要求：HTML 中写
<pre><code class="javascript">.../pre>，class 必须带language-xxx前缀，Prism 才会触发高亮 - 注意加载时机：确保
Prism.highlightAll()在 DOM 加载完后执行；若幻灯片是动态切换（如 SlideWithCursor），需在每页激活后手动调用一次 - 性能提醒：Prism 默认加载所有语言，生产环境建议按需引入
prism-javascript.min.js等单语言包
移动端和可访问性容易被忽略的细节
技术分享常在投影+笔记本+手机多端查看，pre+code 块若没处理好，小屏上要么文字挤成一团，要么横向滚动条卡死，屏幕阅读器也读不出语言类型。
立即学习“前端免费学习笔记（深入）”；
- 强制水平滚动：
pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }（iOS 滚动更顺） - 防缩放破坏布局：
pre { font-size: clamp(0.75rem, 4vw, 0.9rem); }，避免固定 px 导致小屏过小 - 可访问性补全：
<pre><code class="js" aria-label="JavaScript 示例：使用 fetch API">.../pre>，用aria-label明确说明语言和用途 - 禁止文本选中干扰演示：
pre { user-select: text; } code { user-select: text; }（别设 none，否则无法复制）
