正确代码块需嵌套 pre+code：pre 保留空白符，code 表示语义；单独 code 会丢失换行缩进；css 必须设置 pre 的 overflow、字体、尺寸等，高亮需用 highlight.js 等库且 class 必须加在 code 上。
code 标签本身不提供代码样式，只是语义标记
code 是 HTML 内置的行内语义标签，浏览器默认只加等宽字体和轻微上下间距，没有语法高亮、行号、复制按钮或滚动条。直接写 <div>hello</div> 只会渲染成普通等宽文本，和 pre + code 嵌套也完全不同——前者是单行片段，后者才适合多行代码块。
博客中正确嵌套 pre + code 才能保留换行与缩进
用户贴出的 Python 函数如果没换行、缩进全丢，大概率只用了 code 而没包 pre。真实博客代码块应这样写：
def greet(name):
print(f"Hello, {name}!")
return True
关键点：
-
pre负责保留空白符（空格、换行、制表符） -
code放在pre里，表示内容是计算机代码（语义+字体） - 单独用
code时，\n和多个空格会被浏览器合并，等同于普通文本
基础 CSS 必须补上，否则移动端会溢出或字号失控
即使结构正确，没 CSS 也会出问题：长代码行撑破容器、小屏幕文字太小、背景缺失导致看不清。至少加这几条：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
pre {
background: #f6f8fa;
padding: 12px;
border-radius: 4px;
overflow-x: auto;
margin: 1em 0;
}
pre code {
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
font-size: 0.95em;
color: #24292e;
}
注意：
-
overflow-x: auto让横向滚动可用，比换行更保真 - 不要只设
code的font-family，必须连同pre一起控制尺寸和边距 - 移动端下
font-size建议用em或rem，避免固定px导致缩放异常
想高亮就得引入第三方库，但别直接改 code 标签内容
HTML 原生不支持语法高亮。highlight.js 或 Prism.js 都要求你保持原始 pre+code 结构，再由 JS 自动注入 span 包裹关键词。比如：
<pre class="brush:php;toolbar:false;"><code class="python">print("hi")</code>
然后调用 hljs.highlightAll()。常见错误：
- 手动往
code里塞span—— 下次更新代码就全乱，且破坏语义 - 把
class="js"写在pre上，部分高亮库不识别（必须在code标签上） - 用
innerHTML动态插入代码后忘记重新调用高亮函数
语义结构一旦定下来，后续加功能（行号、复制按钮）都得基于这个 pre+code 框架扩展，改错一层，后面全得重适配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
