标签不转义HTML字符会导致解析执行，需手动实体编码或用textContent；单独使用不换行，须与组合并加class="js"等标识；长代码需CSS设置white-space: pre-wrap; overflow-x: auto;。
pre 标签里直接写代码会乱码吗
不会乱码，但会丢格式、混标签、吃空格——<pre class="brush:php;toolbar:false;"></pre> 只负责保留换行和空格，不负责转义 HTML 字符。比如你写 <div>hello</div>，浏览器真会去解析那个 <div>，可能渲染成空白或错位。
<p>正确做法是把尖括号、& 符号这些手动转义：<code><、>、&。或者更省事：用 JavaScript 动态插入时调用 textContent 而非 innerHTML；服务端输出前做 HTML 实体编码。
- 常见错误现象：
<script>alert(1)</script>直接塞进<pre class="brush:php;toolbar:false;"></pre>，结果弹窗了 - 使用场景：文档页展示配置片段、终端命令输出、JSON 示例
- 性能影响：纯静态转义无开销；若用 JS 实时转义大量代码块，注意别在循环里反复调用
replace()
code 标签单独用能换行吗
不能。<code> 是行内元素，连续的换行符、多个空格全被压缩成一个空格，跟普通文字一样“挤在一起”。它只语义化“这是段代码”，不提供排版能力。
所以单用 <code> 只适合短标识符：console.log、useState、__proto__ 这类。想显示多行结构（比如函数、CSS 规则），必须套一层 <pre class="brush:php;toolbar:false;"></pre> 或用 CSS 强制换行（不推荐）。
立即学习“前端免费学习笔记（深入）”；
- 参数差异：
<pre class="brush:php;toolbar:false;"><code></code> 是标准组合，语义清晰；<code><code><pre class="brush:php;toolbar:false;"></pre>是无效嵌套，HTML 解析器会自动修正 - 兼容性影响：所有现代浏览器都支持该组合；IE8+ 也没问题，但 IE7 及更早版本对
<code>的默认字号/行高支持较弱 - 容易踩的坑：写了
<pre class="brush:php;toolbar:false;"><code class="js">...</code> 却忘了给 <code>.js</code> 加语法高亮逻辑，结果只是个灰扑扑的等宽块</pre>
pre + code 组合后怎么加语言标识
靠 class 属性，不是 language 或自定义属性。主流高亮库（Prism、highlight.js）都认 class="js"、class="python" 这种格式。
别写成 class="js" 或 data-lang="js"——前者太模糊（可能被其他样式污染），后者 highlight.js 默认根本不读。
- 使用场景：Markdown 渲染器（如 marked、remark）通常自动把 ```js 生成为
<pre class="brush:php;toolbar:false;"><code class="js"></code></pre> - 常见错误现象：加了
class="javascript"，但 Prism 没反应——因为 Prism 要求严格匹配language-javascript或别名lang-js - 注意点：如果用 Webpack 打包，确保对应语言的 Prism 插件已引入，否则 class 有了，高亮没加载
pre 里的代码太长会撑破容器吗
会，而且默认不折行、不滚动——这是 <pre class="brush:php;toolbar:false;"></pre> 的原始行为。用户得横向拖拽，体验极差。
解决就一行 CSS：pre { white-space: pre-wrap; overflow-x: auto; }。前者让长行自动换行（保留原有缩进逻辑），后者加横向滚动条兜底（当内容实在太宽时）。
- 性能影响：
white-space: pre-wrap渲染开销极小；overflow-x: auto在内容不溢出时不触发滚动条，无额外成本 - 容易踩的坑：只加
word-break: break-all—— 它会在任意字符中断行（包括变量名中间），破坏可读性 - 补充建议：配合
tab-size: 4控制缩进宽度，避免不同编辑器 tab 显示不一致
