单行代码必须用 ，不能套 ； 是块级容器，自带上下 margin 和强制换行，会撑开行高、破坏文字流。
单行代码该用 还是 <pre class="brush:php;toolbar:false;">？
单行代码必须用 ，不能套 <pre class="brush:php;toolbar:false;">。浏览器把 <pre class="brush:php;toolbar:false;"> 当块级容器，自带上下 margin 和强制换行，塞进段落里会撑开行高、破坏文字流。比如写“调用 <code>fetch()</code></pre> 时需传 signal”，如果误写成 <pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;">fetch()</pre>，结果就是前后多出空白、字体可能变 serif、屏幕阅读器读作“预格式化块”而非“函数名”。</pre></pre>
常见错误包括：
• 用
包裹变量名如 <pre class="brush:php;toolbar:false;"><code>user.id</code>，导致意外缩进
• 没设 CSS，
默认背景色浅灰+圆角太弱，和正文对比度低，易被忽略
<h3>多行代码为什么必须嵌套 <pre class="brush:php;toolbar:false;">？</pre>
</h3>
<p><code> 是行内元素，天生不换行；<pre class="brush:php;toolbar:false;"> 只保留空格和换行，但不声明“这是代码”。单独用 <pre class="brush:php;toolbar:false;">，搜索引擎和语法高亮库（如 Prism.js）无法识别内容类型；单独用 <code>，多行代码全挤成一行，缩进塌陷，根本没法看。</code></pre></pre>
正确结构只有一种：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<code>function hello() {<br> console.log('hi');<br>}</code>。注意：• 换行符必须真实存在，不能靠
模拟；从 IDE 复制时确保是纯文本
• 代码含 、& 必须转义为 、&，否则会被解析为标签（例如
里的 HTML 字符不转义会怎样？
不转义就等于主动引入 XSS 风险或 DOM 错乱。浏览器先解析 HTML 结构，再渲染内容。
• 危险写法：if (x → • 安全写法：<code>if (x <br>• 服务端输出前就要转义（如 Node.js 用 he.escape()，PHP 用 <a style="color:#f60; text-decoration:underline;" title="html" href="https://m.php.cn/zt/15763.html" target="_blank">html</a>specialchars()）；前端用 innerHTML 直接插入未转义字符串，等于放弃防护底线
没加 CSS 的 <code> 会有什么问题？</code>
默认样式几乎不可用：
• 缺 font-family: monospace，缩进对不齐，JSON 或 Python 一眼难读
• 缺 tab-size: 4，不同浏览器默认值不同（Chrome 是 8，Firefox 是 4），VS Code 复制的代码缩进错位
• 缺 overflow-x: auto + white-space: pre，长代码行直接撑破容器或被截断
• 别给 直接设 white-space: pre —— 它已继承自 <pre class="brush:php;toolbar:false;">，重复设置可能干扰层叠</pre>
最常被忽略的不是怎么写，而是转义时机和缩进一致性：哪怕只是展示一段 HTML 示例，只要含 、&，就必须转义；缩进统一用空格，别混用 Tab。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
