命令行代码是否需要换行缩进，是唯一判断标准：单条命令（如 npm install）用 <code>，带输出、多行交互或含提示符（$、#、>）的必须用 <pre><code>。
命令行代码该用 还是 <pre class='brush:php;toolbar:false;'></H3>
<p>命令行代码是否需要换行缩进，是唯一判断标准。单条命令（如 <code>npm install
）用 ；带输出、多行交互或含提示符（<code>$、#、>）的必须用 <pre class="brush:php;toolbar:false;">。</p>
<ul>
<li><code>git status
✅ 单行指令，嵌在段落里自然，语义清晰
$ cd /src && ls -la ❌ 含提示符和逻辑连接符，未转义 && 会触发 HTML 解析错误
带输出的示例（如命令后跟返回结果）必须用 <pre class="brush:php;toolbar:false;">，否则换行全丢，变成一长串不可读文本</li>
</ul>
<H3>命令行中特殊字符必须手动转义</H3>
<p>命令行常见符号 <code><
、>、& 在 HTML 中有语法含义，不转义会导致结构崩溃或内容截断。
- 错误写法：
echo "hello" > output.txt → 浏览器把 > 当成标签结束符，后续内容错位
- 正确写法：
echo "hello" > output.txt
- 管道符也要转：
cat file.txt | grep "error"（注意：不是 |，而是其 HTML 实体 |）
- 提示符本身不用转（
$、#），但它们后面紧跟的空格和换行只有在 <pre class="brush:php;toolbar:false;"> 中才保留</li>
</ul>
<H3>用 <pre class="brush:php;toolbar:false;"><code> 展示带提示符的命令交互</H3>
<p>真实终端操作常含提示符 + 命令 + 输出，这种结构天然需要格式保留，<pre class="brush:php;toolbar:false;"><code> 是唯一合规方案。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill2900" title="Markdown to HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178938727468962.jpg" alt="Markdown to HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill2900" title="Markdown to HTML">Markdown to HTML</a>
<p>{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}</p>
</div>
<a href="/xiazai/skill2900" title="Markdown to HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<pre class="brush:php;toolbar:false;"><code>$ git init
Initialized empty Git repository in /project/.git/
$ git add .
$ git commit -m "first commit"
- 必须把整个交互块（含
$、换行、缩进）放进 <pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;">，不能只包命令部分</li>
<li>不要给 <code> 添加 <code>white-space: pre</pre> —— 它已从 <pre class="brush:php;toolbar:false;"> 继承，重复设置可能干扰滚动行为</li>
<li>若用 highlight.js，建议加 <code>class="bash"</code> 到 <pre class="brush:php;toolbar:false;"> 标签内，方便自动识别语法</li>
</ul>
<H3>别给 <code> 加块级样式破坏段落流</H3>
<p><code> 是行内元素，强行让它撑开高度或加 margin 会撕裂段落视觉节奏。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>错误：给 <code> 设 <code>display: block</pre> 或 <code>margin: 1em 0，导致上下文文字“被顶开”
- 正确：仅用
padding、background、border-radius 等内联友好属性修饰
- 如果命令太长（如带一堆 flag 的 curl），
不会自动换行，建议用 CSS 控制：<code>code { word-break: break-all; }，但慎用——可能在单词中间断开
真正容易被忽略的是：命令行代码的语义边界比想象中更硬。写 ls -l 是代码，写 the ls command 就不该套 ；而 <code>$ npm run dev 和它下面那行 Listening on http://localhost:3000 必须同属一个 <code> 块，拆开就失去“交互过程”的语义。</code>
