单行代码必须用，不能用；是块级容器，默认带上下margin、保留空格换行，塞进段落会撑开行高、破坏排版。

单行代码该用

 还是 <pre class="brush:php;toolbar:false;">？

必须用 ，不能用 <pre class="brush:php;toolbar:false;">。浏览器把 &lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt; 当成块级容器，默认带上下 margin、保留所有空格换行，塞进段落里会撑开行高、破坏排版。比如写“调用 &lt;code&gt;fetch()&lt;/code&gt;</pre> 时需处理 <code>AbortSignal”，如果误写成

fetch()

，结果就是文字前后多出空白、字体可能变 serif、屏幕阅读器读作“预格式化块”而非“函数名”。

常见错误现象：

• 用

   包裹单个变量名（如 <pre class="brush:php;toolbar:false;">user.id

  ），导致页面出现意外缩进和换行
• 没设 CSS，

   默认背景色浅灰+圆角太弱，和正文对比度低，易被忽略

多行代码为什么必须嵌套

？

是行内元素，天生不换行；<pre class="brush:php;toolbar:false;"> 只负责保留空格和换行，但不声明“这是代码”。单独用 &lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;，搜索引擎和语法高亮库（如 Prism.js）无法识别内容类型；单独用 &lt;code&gt;，多行代码全挤成一行，缩进塌陷，根本没法看。&lt;/code&gt;</pre></pre>

正确写法只有一种：

<code>function hello() {\n  console.log('hi');\n}</code>

。注意两点：

• 换行符 \n 必须真实存在，不能靠
  模拟；复制 IDE 代码时，确保粘贴的是纯文本（非富文本）
• 若代码含 、& 等字符，必须先 HTML 实体编码，否则会被浏览器解析为标签（例如
  要写成

  ）

  样式控制绕不开的三个 CSS 属性

  仅靠标签语义不够，视觉可读性取决于 CSS。最常漏设、影响最大的三项：

  

  html-to-pptx-converter

  使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

  下载

  • font-family: 'Fira Code', Consolas, Monaco, 'Courier New', monospace —— 不设等宽字体，缩进对不齐，JSON 或 Python 一眼难读
  • tab-size: 4 —— 不设则不同浏览器默认值不同（Chrome 是 8，Firefox 是 4），从 VS Code 复制的代码缩进错位
  • white-space: pre 或 pre-wrap 配合 overflow-x: auto —— 长行不换行也不溢出，滚动条只在需要时出现

  别依赖

   默认样式：它的 margin、padding、背景色各浏览器差异大，必须显式重置。
  
  <h3>复制按钮和语法高亮怎么不踩坑？</h3>
  <p>加复制按钮本身不难，但容易忽略两件事：一是复制内容带行号或首尾空格，二是高亮脚本（如 highlight.js）依赖 </p><pre class="brush:php;toolbar:false;"> 的 class 属性识别语言。比如写 <pre class="brush:js;toolbar:false;">，但忘了在 <code> 上加 class，高亮就失效。
  <p>实操建议：</p>
  <ul><li>用 <code>navigator.clipboard.writeText()</code>
  </li></ul></code>

  时，先 .replace(/^\s+|\s+$/g, '') 清首尾空行，再 .replace(/^ {4}/gm, '') 去掉统一缩进（避免复制后粘贴到 IDE 里多出四格）
• 高亮库通常只扫描 元素，所以 <pre class="py">&lt;code&gt; 不起作用，必须 &lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;code class=&quot;py&quot;&gt;&lt;/code&gt;</pre>
• 行号插件（如 line-numbers）往往要求

   上有特定 class，而 <code> 内容不能含 HTML 标签，否则解析失败</code>

最易被忽略的是：所有这些功能都建立在

<code> 结构正确的基础上——结构歪了，后面加再多 JS 也白搭。</code>