code标签是行内元素，会压缩空白字符；多行代码必须用pre+code嵌套，pre保留格式，code声明语义，缺一不可。

code 标签不是代码块容器，它只负责语义声明；多行代码必须用 pre + code 嵌套，否则格式全丢。

为什么单用 code 会把换行和缩进压成一行

code 是行内元素，浏览器默认压缩所有空白字符——包括换行符、制表符和连续空格。哪怕你写成：

function add(a, b) {
  return a + b;
}

实际渲染出来就是：function add(a, b) { return a + b; }，括号错位、逻辑难读。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 常见错误现象：复制粘贴到编辑器里全是平的，console.log() 被塞进段落却缩进错乱
• 适用场景：仅限穿插在句子中的短标识，比如 useState、npm install、/src/utils.js
• 别给 code 设 width 或 margin——它不响应这些属性，强行加只会让布局不可控

多行代码必须用 pre 包 code，缺一不可

pre 保留原始格式（空格、换行、缩进），code 声明“这是代码”——前者管“怎么显示”，后者管“这是什么”。高亮库（如 Prism.js）也只扫描 pre 下的 code 元素。

• 正确结构：

  function greet() { console.log("hi"); }

• 漏掉 code：屏幕阅读器读作“预格式化文本”，不是“JavaScript 代码”
• 漏掉 pre：所有缩进和换行被浏览器吞掉，只剩一坨平文本
• class 属性不能少：写成 class="javascript" 或 language-js，否则高亮不触发

pre + code 的 CSS 关键设置

没样式也能显示，但体验差。几个硬性要点必须加：

• pre 必须设 overflow-x: auto，否则长代码行直接撑破容器
• code 要设 display: block，否则它作为行内元素，不继承 pre 的宽高和滚动控制
• 字体推荐：font-family: ui-monospace, 'SFMono-Regular', 'Consolas', monospace，比默认更稳
• 缩进统一用空格（2 或 4 个），别用 Tab——不同环境渲染宽度不一致，容易错行
• 如果代码里含 、<code>>、&，必须提前转义为 <、>、&，否则浏览器真会解析成标签

居中代码块时最容易踩的坑

pre 默认是块级元素，但它的宽度由内容撑开，margin: 0 auto 不生效。直接对父容器设 text-align: center 会破坏内部缩进，让高亮错位。

• 可靠做法：用 div 包裹 pre，给 div 设 max-width 和 margin: 0 auto，再重置 pre 的默认上下 margin
• 内联 code 居中：要么放 p 里并设 text-align: center，要么单独设 display: block + margin: 0 auto，但要手动调 line-height 或 padding 补齐行高
• 真正容易被忽略的是混用边界：有人把整段 Shell 脚本塞进 code，有人把 console.log() 单独包一层 pre。判断标准只有一个——要不要保留原始换行和缩进。

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