命令行高亮需语义标记（class="bash"）与主动着色（hljs.highlightelement()），缺一不可；漏引bash.min.js、class无language-前缀、脚本执行过早是三大失败原因。
单行命令行高亮必须用 ，但不能只靠它
单独写 ls -la 不会触发 highlight.js 或 Prism.js 的语法高亮——库默认忽略所有非 <pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"> 结构。命令行不是编程语言，没有内置 language-shell 支持，得手动归类或绕过自动扫描。</pre></pre>
highlight.js 默认不识别 <code class="bash">、<code class="shell"> 这类 class；得显式加载对应语言支持文件（如 <code>bash.min.js）- Prism.js 对命令行更友好，
或 <code class="shell"> 可直接生效（前提是已引入 <code>prism-bash.js） - 若只有一两处命令行，别折腾自动扫描：用
hljs.highlightElement()手动处理更稳
怎么让 里的命令行带颜色
核心是两件事：语义标记 + 主动着色。浏览器不会给 自动加颜色，必须靠 JS 库解析并注入 <span>。</span>
- 写法必须是：
<code class="bash">npm install --save-dev vite - class 值必须含
language- 前缀，<code>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;"> 反而会多出上下边距、破坏行高
常见错误：命令行高亮失败的三个硬伤
90% 的“没颜色”问题卡在这三点，和代码本身无关。
- 漏引语言支持文件：只引了
highlight.min.js 和主题 CSS，但没加载 <code>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 仍读原文）
bash.min.js 得单独 import 或通过 CDN 加载。命令行高亮不是开箱即用的功能，它比 JS/HTML 高亮更“懒”，必须显式唤醒。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
