单行代码须用 code 标签包裹并设等宽字体、转义特殊字符；多行代码必须用 pre+code 嵌套以保留格式与语义，且需控制滚动、缩进和高亮容器结构。
单行代码嵌在段落里怎么写才不翻车
在线教学系统里，讲解语法或调用方式时，console.log()、useState() 这类短内容必须用 code 标签包裹，不能塞进 pre——否则段落上下会多出大块空白，行高错乱，学生看文字像坐过山车。
常见错误是把 code 当成样式容器，加 background 却不设 font-family: monospace，结果在某些系统字体缺失时回退到衬线体，1lI0O 全糊成一团。更隐蔽的问题是没转义：写 <div> 却没写成 <code><div>，浏览器直接解析标签，后半页 HTML 全崩。
<ul>
<li>只用于函数名、变量、命令、路径等单行片段，如 <code>/src/api/user.js
code { font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; }
、<code>>、& 的内容一律转义，哪怕只是示例里的 if (x > 0)
多行代码块为什么必须用 pre + code 嵌套
学生复制粘贴的代码片段，比如一个 React 组件或 Shell 脚本，换行和缩进一丢就跑不通。code 单独撑不起多行，它天生是行内元素，浏览器自动合并空格和换行——这不是 bug，是规范行为。
正确结构只有 pre 包 code：前者保留原始格式，后者声明“这是代码”，二者语义互补。漏掉任意一个，屏幕阅读器要么读作“预格式化文本”（没说清是代码），要么读作“一段文字”（丢了语义）。
- 别用
pre单独包代码，否则辅助技术无法识别语言类型 - 别给
code加white-space: pre，它已从pre继承，重复设置可能干扰层叠 - 长代码行必须加
pre { overflow-x: auto; }，不然直接撑破容器，移动端全白屏
在线教学系统里最常被忽略的 CSS 控制点
很多教学平台只加了背景色和圆角，但没处理横向滚动和 tab 宽度，结果学生看到的代码缩进错位、行尾截断、关键字被折到下一行——尤其在移动设备上，fetch() 可能被切成 fetch( 和 ) 两行，直接误导。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
真正影响可读性的不是颜色，而是排版控制粒度。比如 tab-size: 2 能统一不同编辑器的缩进视觉宽度；code { display: block; } 是让 code 响应 pre 的宽高和滚动的前提；而 pre 上加 margin 或 padding 必须避开顶部，否则和上一段文字之间留出诡异空隙。
-
pre必须设overflow-x: auto，且禁用word-break -
code必须设display: block，否则不继承pre的滚动行为 - 缩进统一用空格（2 或 4 个），禁用 Tab 字符——不同终端渲染宽度不一致
语法高亮不是 code 的责任，但容器结构不能错
在线教学系统如果引入 Prism.js 或 highlight.js，它们只认 pre 下的 code 结构，并依赖 class="js" 这类属性触发高亮。你把高亮库塞进去却没按规范写容器，脚本根本不会执行。
更麻烦的是混用场景：有人把整段 Bash 脚本塞进 code，有人把 console.log("hello") 单独包一层 pre。判断标准只有一个——要不要保留原始换行和缩进。该用 pre+code 却只用 code，高亮失效；不该用 pre 却硬套，段落间距爆炸，页面节奏全乱。
- 高亮库不改变语义，只增强视觉，容器结构错了，再炫的配色也救不回来
-
class属性加在code上，不是pre上，例如<code class="python"> - 如果代码里有 HTML 实体（如
真正难的不是写对标签，是每次插入代码前下意识问一句：这串东西学生是要复制运行，还是仅作示意？前者必须保格式、转义、设滚动；后者可能 code 就够了。漏掉这个判断，后面所有样式和脚本都是在补洞。
