HTML 的 <code> 标签默认无语法高亮，仅渲染为等宽字体；需借助 highlight.js 等解析器实现关键词识别与着色，且须声明 language-xxx 类并确保 DOM 加载完成后再调用 hljs.highlightAll()。
HTML 标签默认不带高亮，得自己加样式</H3>
<p>浏览器对 <code> 标签只做基础等宽字体渲染，没有语法高亮——它不是 <pre class="brush:php;toolbar:false;"><code> 的替代品，也不是代码编辑器。真要高亮，必须手动配 css 或引入第三方库。</p>
<ul>
<li>纯 CSS 只能做颜色/背景/字体等静态修饰，无法识别 <code>if
、const 这类关键词
highlight.js 或 Prism.js 这类解析器，它们会扫描文本、打标签、再套样式code 写 color: #e6db74，结果所有代码都变黄，连注释和字符串都分不清用 highlight.js 快速启用 HTML 内联代码高亮
适合页面里零星几处
<code>console.log("hello")</code> 需要高亮的场景，不用改结构，也不用写 JS 初始化逻辑（开箱即用）。</p>
<ul>
<li>在 <code><head> 里引入 CDN：<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script></li>
<li>注意：它只处理 <code><pre><code>...</code></pre></code> 结构，单独的 <code><code></code> 不生效 —— 想高亮内联代码，得手动调 <code>hljs.highlightElement(el)</code></li>
<li>语言需显式声明，比如：<code><code class="javascript">const x = 1;</code></code>，否则可能误判为 plaintext</li>
</ul>
<H3>隐藏 <code><code></code> 标签但保留语义和可访问性</H3>
<p>有时设计稿要求“看起来没代码框”，但又不能删掉 <code><code></code>——比如 SEO 需要标记技术名词，或屏幕阅读器要读出这是代码片段。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1211" title="标小智"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680114797053.png" alt="标小智" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1211" title="标小智">标小智</a>
<p>智能LOGO设计生成器</p>
</div>
<a href="/ai/1211" title="标小智" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>别用 <code>display: none</code> 或 <code>visibility: hidden</code>，会彻底屏蔽内容，辅助技术读不到</li>
<li>推荐组合：<pre class="brush:php;toolbar:false;">code {
font-family: inherit;
background: transparent;
color: inherit;
padding: 0;
border: none;
}font-family，但得确认是否影响语义传达（比如 git commit 和普通单词视觉区分度就没了）font-size: 0 + line-height: 0 隐藏，结果某些浏览器仍保留占位空白，或导致焦点丢失为什么不用 <span> 替代 <code> 来省事
看似一样能加样式，但语义和兼容性差一截。
-
<code>是 HTML5 明确定义的短语元素，会被搜索引擎、语法检查工具、代码分析插件识别为“此处是代码” - AT（辅助技术）会以不同语调读出
<code>内容，比如“代码段：fetch API”；换成<span>就只是平读 - 某些 CMS 或文档生成器（如 JSDoc、Docusaurus）会自动提取
<code>内容做索引或跳转，<span>不进这个流程 - 维护成本更高：后期加高亮或导出 PDF 时，得额外写规则匹配一堆自定义 class，而
code是天然选择器
highlightAll() 放太早，元素还没出来；不写 language-xxx，高亮就靠猜，Python 代码被当成 Shell 处理，关键字全标错。 
