code 标签仅支持单行无格式文本：浏览器会压缩空格、忽略换行、丢失缩进；多行Python代码必须用 pre 包裹 code 并转义HTML字符，否则 def、return 等结构将错乱失形。
code 标签本身不能正确展示 Python 代码块——它只适合单行、无换行、无缩进的片段，比如 print() 或 def；多行 Python 脚本必须用 pre + code 嵌套，并手动转义 HTML 字符。
为什么单独用 code 显示 Python 会出问题
浏览器把 code 当作纯行内元素：连续空格被压缩、换行被忽略、缩进全丢。写成这样：
def greet(name):
return f"Hello, {name}!"
如果只包 code，实际渲染出来就是 def greet(name): return f"Hello, {name}!"，函数体缩进和换行全部消失。更糟的是，若代码含 或 <code>&（如 if x < 10:），不转义会直接被解析为 HTML 标签，导致页面结构错乱。
正确写法：必须用 pre 包裹 code
这是唯一能保留 Python 缩进、空行、换行的组合。要点如下：
立即学习“Python免费学习笔记（深入）”；
-
pre负责保留所有空白字符（包括 tab 和多空格） -
code嵌套其中，声明语义——“这是计算机代码”，辅助技术与 SEO 可识别 - Python 代码中的
必须写成 <code><，>→>，&→& - 推荐加
class="python"，方便后续用 Prism.js 等库做语法高亮
示例：
def calculate_total(items):
total = 0
for item in items:
if item.get("price"):
total += item["price"]
return round(total, 2)
常见误用与修复建议
容易踩的坑不是“怎么写”，而是“怎么维护”：
- 复制粘贴 Python 源码时，直接贴进
code标签里 → 必须先用工具或脚本转义 HTML 实体（如 Python 的html.escape()） - 给
code加white-space: pre-wrap试图模拟pre→ 无效，code是行内元素，无法撑开换行，且语义错误 - 用
pre但不嵌套code→ 失去代码语义，屏幕阅读器读作“预格式化文本”，而非“Python 函数” - 在 Dash 或 React 等框架中直接插字符串 → 务必确保服务端或组件层已完成 HTML 转义，否则 XSS 风险
复杂点在于上下文：是否需要交互功能
纯静态展示只需 pre+code；但真实场景常需复制按钮、行号、语言标签、暗色主题切换。这些都不是 code 或 pre 自带能力，得靠额外 JS/CSS 支持。最容易被忽略的是：转义必须在插入 DOM 前完成——哪怕用了 Prism.js，它只高亮，不修复未转义的 <div> 类标签。</div>
