标签保留空格、换行和缩进，标签提供代码语义但不保留格式；二者嵌套（）可兼顾格式完整性与语义准确性，避免单独使用导致的缩进塌陷、换行丢失或可访问性缺失。

pre 标签本身就能保留原始空格、换行和缩进，不需要额外设置；而 code 标签语义上表示一段代码，但默认不保留空格。两者结合使用，既能保持格式，又具备语义准确性。

为什么用 pre 包裹 code

pre 提供预格式化环境（preserve whitespace），code 提供语义标识（这段是代码）。浏览器对 pre code 有默认样式（如等宽字体），也方便 CSS 精准控制。单独用 code 会把多个空格合并成一个，换行也被忽略。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

基本写法：嵌套结构要正确

必须把 code 放在 pre 内部，而不是反过来：

function hello() {
    console.log("  indented string  ");
}

避免常见错误

• 不要写成 <code><pre class="brush:php;toolbar:false;">...</pre>
• 不要在 HTML 源码中用全角空格或特殊不可见字符，确保空格是 ASCII 空格（U+0020）
• 如果代码里含 、<code>>、&，必须转义为 <、>、&，否则会被解析为标签

增强可访问性与样式控制

可以给 pre 添加 tabindex="0" 支持键盘聚焦，加 role="region" 和 aria-label 提升读屏体验。CSS 中推荐：

pre {
  overflow-x: auto; /* 防止长行溢出 */
  padding: 1em;
}
pre code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

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