是行内元素，浏览器会折叠空白符，导致缩进消失、换行塌陷；必须嵌套在中以保留格式并确保语义、SEO和可访问性。

为什么单用

 会导致缩进消失、换行塌陷

是行内元素，浏览器会像处理普通文字一样折叠所有空白符——多个空格变一个，换行当空格，制表符被忽略。哪怕你写成：

function foo() {
  return "hello";
}

实际渲染出来就是 function foo() { return "hello"; }，缩进和换行全没了。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• 只适合包裹单个标识符，比如 console.log、useState、JSON.parse
• 不能承载多行逻辑，哪怕只有两行带缩进的代码，也必须配合

• 默认样式只是等宽字体，不带背景、边框或内边距，需手动加 CSS 才像“代码块”

为什么必须用

<pre class="brush:php;toolbar:false;"> 嵌套，而不是反过来或单独用 <pre class="brush:php;toolbar:false;">

 嵌套结构，而非仅用  或 。

顺序不能错： 是块级容器， 必须嵌在里面，否则  的语义无法生效
单独用  会保留格式，但 SEO 和可访问性弱，且某些高亮库（如 Prism.js）依赖  上的 language-js 类来触发解析
 标签紧贴  开闭标签写，别留换行：写成 ...，不是 \n...\n\n


HTML 中写代码时，哪些字符必须转义
如果你把真实 HTML 片段（比如含 <div>）直接塞进  里，浏览器会把它当标签解析，导致结构错乱甚至脚本执行。必须对 、& 做 HTML 实体转义。

 → >
& → &
常见错误：复制一段 React JSX 到  标签里，忘了转义 <component></component>，结果页面直接渲染出空组件或报错
服务端渲染时建议用 textContent 插入或模板引擎自动转义；前端 JS 动态插入可用 document.createTextNode() 避免风险


长代码行溢出、复制体验差，怎么快速修
没加样式控制的  容易撑破容器，尤其 JSON 或日志类宽文本。用户想复制还常误选到行号或空格。

加 overflow-x: auto 和 white-space: pre（不要用 pre-wrap，它会破坏缩进对齐）
用 tab-size: 4 统一制表符宽度，避免不同编辑器缩进不一致
复制功能别手写：用 navigator.clipboard.writeText() + 按钮绑定，注意权限提示
行号是锦上添花，但若用 JS 动态生成，记得在 textContent 渲染后再加，否则空行或首尾换行会错位

最常被跳过的细节是：嵌套结构中  的 class 名（如 language-py）必须写在  上，不是  上；高亮库靠这个识别语言。漏了就只能灰底白字，语法零高亮。</div>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！