命令行高亮需语义标记（class="bash"）与主动着色（hljs.highlightElement()），缺一不可；漏引bash.min.js、class无language-前缀、脚本执行过早是三大失败原因。

单行命令行高亮必须用

，但不能只靠它</H3>
<p>单独写 <code>ls -la

不会触发 highlight.js 或 Prism.js 的语法高亮——库默认忽略所有非

<pre class="brush:php;toolbar:false;"> 结构。命令行不是编程语言，没有内置 language-shell 支持，得手动归类或绕过自动扫描。</p>
<ul>
<li><code>highlight.js

默认不识别 、<code class="shell"> 这类 class；得显式加载对应语言支持文件（如 <code>bash.min.js）

Prism.js 对命令行更友好， 或 <code class="shell"> 可直接生效（前提是已引入 <code>prism-bash.js）

若只有一两处命令行，别折腾自动扫描：用 hljs.highlightElement() 手动处理更稳

怎么让

 里的命令行带颜色</H3>
<p>核心是两件事：语义标记 + 主动着色。浏览器不会给 <code> 自动加颜色，必须靠 JS 库解析并注入 <span>。</p>
<ul>
<li>写法必须是：<code><code class="bash">npm install --save-dev vite</code></li>
<li>class 值必须含 <code>language-

前缀，bash 或 shell 都行，但 cmd、terminal 不被识别

如果页面已加载 highlight.js，需在 DOM 就绪后调用：hljs.highlightElement(document.querySelector('code.language-bash'))

别把

 包在 <pre class="brush:php;toolbar:false;"> 里——单行命令不需要保留换行，<pre class="brush:php;toolbar:false;"> 反而会多出上下边距、破坏行高</li>
</ul>

<H3>常见错误：命令行高亮失败的三个硬伤</H3>
<p>90% 的“没颜色”问题卡在这三点，和代码本身无关。</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" ></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>漏引语言支持文件：只引了 <code>highlight.min.js

和主题 CSS，但没加载 bash.min.js → 识别为 plaintext

class 写成 class="bash" 而非 class="bash" → highlight.js 直接跳过该元素

脚本执行太早：DOM 还没渲染出 元素，<code>highlightElement() 找不到目标 → 放在 DOMContentLoaded 事件里最安全

不想引入 JS？用纯 CSS 模拟高亮效果

如果只是想视觉上区分命令行（比如灰底+等宽字体+小图标），完全不用高亮库。

立即学习“前端免费学习笔记（深入）”；

• 给 加 class：<code class="cli">git commit -m "init"
• CSS 写：.cli { background: #f5f5f5; padding: 2px 6px; border-radius: 3px; font-family: ui-monospace, 'SFMono-Regular'; }
• 图标可用伪元素：.cli::before { content: "$ "; margin-right: 4px; opacity: .7; }
• 这种方案不解析语法，但加载快、零依赖、无障碍友好（screen reader 仍读原文）

实际部署时，最容易被忽略的是语言支持文件的按需加载——很多项目只引了通用 JS，却忘了 bash.min.js 得单独 import 或通过 CDN 加载。命令行高亮不是开箱即用的功能，它比 JS/HTML 高亮更“懒”，必须显式唤醒。