<pre>仅保留空白符无语义，须嵌套<code>标识代码语义；<code>为行内元素需<pre>支撑换行；CSS应重置默认样式并设置等宽字体、tab-size及UTF-8编码。
pre 标签只负责换行和空格，不带语义
<pre> 的核心作用是原样保留文本中的空白符（空格、制表符、换行），浏览器不会像处理普通段落那样折叠或合并。但它本身不表示“这是代码”，只是个格式容器。常见错误是只用 <pre> 包裹代码却没加 <code>，导致屏幕阅读器无法识别内容类型，SEO 也丢失语义信息。
实际使用时建议始终嵌套：<pre><code>...</code></pre>。这样既保留格式，又明确语义。如果只展示纯文本（比如诗歌、ASCII 图），单独用 <pre> 是合理的。
code 标签必须在 pre 内才能换行显示多行代码
<code> 本身是行内元素，它只告诉浏览器“这段是代码”，但默认会把所有换行当空格处理。直接写：
<code>
function hello() {
console.log('hi');
}</code>
结果是一整行挤在一起。要让换行生效，必须包裹在 <pre> 里：
立即学习“前端免费学习笔记（深入）”；
<pre><code>
function hello() {
console.log('hi');
}</code></pre>
注意：CSS 中 white-space: pre 或 pre-wrap 也能模拟类似效果，但语义和可访问性不如原生 <pre><code> 组合。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
样式控制优先用 CSS，别依赖 pre 的默认缩进
不同浏览器对 <pre> 的默认 margin、font-family 和缩进宽度（如 tab-width）可能不一致。容易踩的坑包括：
- 未重置
margin导致上下间距过大 - 没设
font-family: monospace，代码字体变成衬线体，可读性差 - 没设
tab-size: 4，导致缩进混乱（尤其从 IDE 复制过来的代码） - 没限制宽度或启用换行，长行溢出容器
推荐最小样式配置：
pre code {
font-family: ui-monospace, 'SFMono-Regular', 'Consolas', monospace;
tab-size: 4;
white-space: pre;
overflow-x: auto;
}
pre {
margin: 0;
padding: 1em;
background: #f5f5f5;
}
遇到中文或特殊字符乱码，检查 charset 和字体支持
如果代码块里出现方框、问号或豆腐块，大概率是字体缺失或编码声明缺失。确保 HTML 文档开头有：
<meta charset="UTF-8">
同时确认所选等宽字体支持中文（比如 'Fira Code' 默认不支持中文，得 fallback 到 'Noto Sans CJK SC' 或 'Microsoft YaHei'）。简单测试方法：在 <code> 里放一句中文注释，看是否正常渲染。
复杂点在于字体加载顺序和 fallback 链——不是所有系统都预装了编程常用中文字体，生产环境建议用 @font-face 内联关键字重或明确声明 fallback。
