<p><code>仅用于标记内联短代码片段，语义为计算机可执行代码；整段脚本须用<pre><code>组合保留格式，Markdown中应优先使用语言标识符语法。</p>
<code> 标签不是用来“排版运维脚本说明文档”的万能工具，它只负责标记一段**内联的、短小的代码片段**，语义是“这段文字是计算机可执行代码或标识符”，浏览器默认会用等宽字体显示，但不会自动换行、缩进或高亮。
为什么直接套用 <code> 写脚本说明会出问题
常见错误现象包括：<code> 里塞整段 Bash 脚本、Python 函数、JSON 配置，结果：
- 所有内容挤在一行，
if [[ $status -eq 0 ]]; then echo "OK"; fi变成密不透风的一长串 - 缩进全丢失（HTML 忽略多余空格和换行），
for循环体无法对齐 - 引号、反斜杠、
$符号被浏览器或模板引擎提前解析，导致显示异常甚至 XSS 风险 - 没有行号、无法复制、不支持语法关键词着色
真正该用 <pre><code> 组合，且顺序不能错
要保留原始换行、空格和结构，必须嵌套使用：<pre> 控制空白处理，<code> 提供语义。顺序必须是 <pre><code>...</code></pre> —— 反过来或单独用 <pre> 会丢失代码语义，影响屏幕阅读器和 SEO。
示例正确写法：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
<pre><code class="bash">#!/bin/bash if [[ $1 == "start" ]]; then systemctl start nginx echo "Nginx started" fi</code></pre>
关键点：
-
<pre>是块级容器，自带上下边距和等宽字体；<code>是行内语义标签，必须放在<pre>里面才有效 - 加
class="bash"（或其他语言名）是为后续用 Prism.js 或 Highlight.js 做语法高亮留接口，不加也合法，但纯文本无颜色 - 不要在
<pre><code>里手动写<br>—— 它们会破坏原始结构
运维文档中避免手写 HTML 的三个替代方案
如果你在写 Markdown 格式的运维文档（如 README.md、Confluence、GitLab Wiki），优先走原生语法，比手写 HTML 更安全、更轻量：
- 用三个反引号包裹代码块：
```bash+ 脚本内容 +```，渲染后自动转成<pre><code>并带语言类名 - 命令行交互示例用
```console，能区分提示符（$/#）和输出 - 配置文件片段用
```yaml或```json，避免手动转义引号和缩进错位
最后提醒：运维文档的核心是准确传达操作意图，不是炫技。哪怕只用最朴素的 <pre><code>，也要确保复制粘贴后能直接运行 —— 这比任何花哨的 CSS 动画都重要。别忘了检查 $PATH、权限、环境变量这些 HTML 永远标不出的隐性依赖。
