code标签仅负责语义标记和等宽渲染，不提供高亮功能；单行代码用code+CSS类（如.kw），多行必须用<pre>嵌套结构，并配合Prism.js等库实现语法高亮。
code 标签本身不提供“突出显示”功能，它只负责语义标记和基础等宽渲染。真要突出关键代码（比如高亮某行、变色某个变量），得靠 CSS 或 JS 库配合，且必须严格区分使用场景。
单行内联代码用 code + CSS 类控制样式
适合在段落中强调函数名、参数或命令，比如“调用 fetch() 时传入 AbortSignal”。这时 code 是唯一语义正确的选择。
- 必须显式设置
font-family: monospace，否则可能继承正文字体，失去代码感 - 加背景色或边框要小心：避免用
white-space: pre，否则长内容会溢出容器且基线错位 - 推荐轻量级类名，例如：
<code class="kw">const</code>，再配 CSS：.kw { background: #ffeb3b; padding: 0 3px; } - 别给
code加display: block或width: 100%——它本就是行内元素，强行块化会破坏段落流
多行代码块必须用 <pre class="brush:php;toolbar:false;"> 嵌套结构</H3>
<p>想高亮整个函数体、配置片段或命令输出，<code>code
单独用会塌成一行、缩进全丢。必须用 <pre><code>...</code></pre></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill5806" title="html-deploy">html-deploy</a>
<p>使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li><code>pre 负责保留换行与空格，code 负责声明“这是代码”，二者缺一不可
overflow-x: auto 到 pre，而不是 code
pre { tab-size: 2; }
、<code>>、& 会导致 HTML 解析失败——比如写 <div> 必须写成 <div>
<h3>语法高亮不能靠 <code>code 标签自动实现
code 标签不解析语法，也不打 token class。所谓“高亮”，本质是把 const、"string"、// comment 分别加上 class="keyword"、class="string" 等，再配 CSS 颜色。
立即学习“前端免费学习笔记（深入）”；
- Prism.js 或 highlight.js 是主流方案，它们只认
<pre><code class="js">这种结构 -
class="js"必须写在code上，不是pre上；否则高亮库无法识别语言 - 服务端渲染（如 Next.js）需确保高亮逻辑在客户端执行，否则 SSR 时无 class 输出
- 别手动给每个单词加 class——维护成本爆炸，且破坏可访问性
最常被忽略的是职责边界：code 只管“这是代码”，pre 只管“按原样排版”，颜色、行号、复制按钮这些都得靠额外层介入。混用或跳过其中一环，轻则格式错乱，重则 DOM 损毁。
