<code>标签仅用于展示文本，不执行脚本、不解析语法、不支持高亮；正确用法是<pre><code>嵌套，内容需HTML实体转义，高亮依赖Prism.js等外部库。
code 标签本身不能执行 Shell 脚本，只能显示文本
<code> 是语义化标签，浏览器会按等宽字体渲染内容，但不会识别语法、不支持高亮、也不做任何 Shell 解析。它只是「展示」，不是「运行」——这点常被误认为能“嵌入可执行脚本”。如果你看到页面里 ls -la 变蓝了或带背景色，那一定是 CSS 或 JS 库（比如 Prism.js）额外加的样式，和 <code> 标签本身无关。
正确包裹 Shell 命令的 HTML 写法
直接用 <code> 包裹命令片段，配合 <pre> 保留换行和空格：
#!/bin/bash echo "Hello, world!" ls -la /tmp
注意几点：
-
<pre>必须在外层，否则缩进和多行会塌成一行 - Shell 脚本里的特殊字符（如
<、>、&）要 HTML 实体转义，否则会被浏览器解析为标签：替代 <code><，>替代> - 别用
<code><pre>嵌套顺序反了——正确是<pre><code>，语义上<pre>定义格式化区块，<code>标明内容类型
想加语法高亮？得靠外部工具
原生 HTML 不支持 Shell 语法着色。常见做法：
立即学习“前端免费学习笔记（深入）”；
- 用 Prism.js：引入 JS/CSS 后，给
<code>加class="bash"，它会自动识别并上色 - 用 Highlight.js：类似，class 写成
language-shell或language-bash - 静态站点生成器（如 Hugo、Jekyll）通常内置支持，在代码块前加 ```bash 就能触发高亮
没引入这些库时，class="bash" 不会产生任何效果——仅是约定，不是浏览器标准。
常见错误：把脚本当内联 JS 或搞错转义
以下写法全是错的：
- 直接写
<code>rm -rf /</code>——/没问题，但万一后面跟<script>就危险；更糟的是用户复制粘贴时可能漏掉转义 - 在
<code>里写未转义的echo "<div>test</div>"→ 浏览器真会去解析那个<div>，导致 DOM 错乱 - 用
<script type="shell">—— 这个 MIME 类型不存在，浏览器直接忽略或报错
真正安全的做法：所有 Shell 脚本内容先经 HTML 实体编码（尤其是 &、<、>），再塞进 <pre><code>。
