code 标签仅用于包裹单行、无换行的行内代码片段，如函数名、变量名或简短命令；多行代码须用 pre 嵌套 code，否则语义与格式均失效。
code 标签不是代码块容器，它只适合包裹单行、无换行的代码片段，比如函数名或命令；多行代码必须用
<pre class="brush:php;toolbar:false;"> 嵌套结构，否则格式全丢、语义错乱。</p> <H3>什么时候该用 <code>code而不是
<pre class="brush:php;toolbar:false;"></H3> <p>只在段落中提一个短小技术名词时用：<code>code是行内元素，天生适配文本流。
-
fetch()✅ 正确：浏览器保持行高正常，屏幕阅读器读作“fetch 函数” -
useState✅ 正确：变量/钩子名，上下文明确 -
npm install✅ 正确：命令短，不换行 if (x ❌ 错误：含 <code> 且逻辑多行，未转义 + 格式丢失-
<div class="app"></div>❌ 错误：未转义和 <code>>，浏览器会解析为真实标签
<pre class="brush:php;toolbar:false;"> 必须嵌套，不能只用其中一个</H3>
<p><pre class="brush:php;toolbar:false;"> 保格式，<code> 定语义——两者缺一不可。单独用 <pre class="brush:php;toolbar:false;">，高亮库（如 Prism.js）无法识别语言；单独用 <code>，所有缩进和换行被压成一行。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill8272" title="anything-to-html"><img
src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill8272" title="anything-to-html">anything-to-html</a>
<p>将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p>
</div>
<a href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>正确写法：<pre class='brush:js;toolbar:false;'>function greet() { return 'hi'; }
function greet() { return 'hi'; } → 渲染为单行，无缩进
function greet() { return 'hi'; } → 搜索引擎当普通文本，不索引为代码class="js" 不是必须，但加上能触发语法高亮库自动识别HTML 特殊字符必须手动转义， 不会帮你做</H3>
<p><code>code
标签只提供语义，不处理内容安全。浏览器先解析 HTML 结构，再渲染内容——漏转义就等于开漏洞。
立即学习“前端免费学习笔记（深入）”；
- 必须转义：
→ <code><，>→>，&→& - 危险示例：
if (a d)→ 实际被解析为标签或中断 DOM - 安全写法：
if (a < b && c > d) - 纯文本展示更省心：用
textContent替代innerHTML，例如el.textContent = '<div>test</div>'
CSS 控制 <pre class="brush:php;toolbar:false;"> 显示效果的关键点</H3>
<p>没样式也能显示，但体验差。几个硬性设置建议直接加到 CSS 里：</p>
<ul>
<li><pre class="brush:php;toolbar:false;"> 必须设 <code>overflow-x: auto
，否则长代码横向撑破容器
code 要设 display: block，否则它作为行内元素，不响应 的宽高和滚动
font-family: ui-monospace, 'SFMono-Regular', 'Consolas', monospace，比默认更稳code 单独设 white-space: pre——它已从 继承，重复设置可能干扰层叠
最容易被忽略的是混用边界：有人把整段 Shell 脚本塞进 code，有人把 console.log() 单独包一层
。唯一判断标准——要不要保留原始换行和缩进。
