单独使用<code>标签不行，因其仅为语义标签，默认不保留空格、换行，且无等宽字体；必须嵌套在<pre>中并配合CSS设置font-family、background-color、padding和overflow-x等属性才能正常显示代码块。
<code> 标签本身不带样式，直接用会显得干瘪、难读，必须配合 <pre> 和 CSS 才能真正“美化”——否则连换行和空格都保不住，更别说背景色、字体、滚动条这些基础体验。
为什么单独用 <code> 标签不行
<code> 是语义标签，只告诉浏览器“这是代码”，但默认不保留格式：多个空格被合并、换行被忽略、没有等宽字体。常见错误是写成这样：
<p>调用 <code>console.log()</code> 即可输出</p>
结果 console.log() 被挤在普通段落里，缩进丢失，括号和点号也看不清。真正需要代码块时，必须嵌套在 <pre> 里。
<pre><code> 组合的最小可行 CSS
以下样式能解决 90% 的基础需求，直接复制到 <style> 或外部 CSS 中即可生效：
立即学习“前端免费学习笔记（深入）”；
-
font-family必须设为等宽字体，推荐：'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace -
background-color建议浅灰（如#f8f8f8），避免纯白刺眼 -
padding至少0.5rem，给文字留呼吸空间 -
overflow-x: auto防止长行撑破容器；white-space: pre已由<pre>保证，不用重复写
示例规则：
pre {
background-color: #f8f8f8;
padding: 0.5rem 1rem;
overflow-x: auto;
}
code {
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}
语言标识与语法高亮的衔接要点
如果后续要加 Prism.js 或 Highlight.js，关键不是写对 JS，而是 HTML 结构要提前留好钩子：
-
<code>标签必须带class，且格式为language-xxx（如language-js、language-html） - 不要写成
class="js"或lang="js"，高亮库通常只认language-前缀 - 如果用
<pre><code class="python">print("hello")</code></pre>，Prism 才会自动识别并上色 - 注意：HTML 特殊字符（如
<、>）必须转义为、<code>>，否则会被浏览器解析成标签，内容直接消失
响应式与长代码的兼容处理
移动端或窄屏下，代码块容易横向溢出，光靠 overflow-x: auto 不够稳定：
- 加
max-width: 100%到<pre>，防止父容器过窄时内容错位 - 避免给
code设固定width或min-width，会破坏滚动逻辑 - 如果项目用 CSS-in-JS 或 Tailwind，注意
whitespace-pre和overflow-x-auto必须同时作用于<pre>，而非<code> - Firefox 对
<pre>内部code的行高计算略有差异，建议统一设line-height: 1.5避免断行错位
最常被忽略的是字符转义和 class 命名规范——结构没搭对，再 fancy 的高亮库也救不回来。
