<code>标签语义上仅表示短小的内联可执行代码片段，不保留换行缩进；多行代码必须嵌套于<pre><code>中，且需CSS补充背景、圆角等样式，否则渲染异常或被忽略。
<code> 标签不是用来“高亮代码块”的视觉容器，它语义上只表示一段「短的、内联的、计算机可执行的代码片段」。博客园和简书都支持它，但渲染效果和使用边界完全不同——直接套在多行代码或带缩进的代码块上，反而会破坏排版甚至被解析失败。
为什么 <code> 在博客园里常被忽略样式
博客园默认 CSS 几乎没给 <code> 单独定义样式，它通常继承 font-family 和 font-size，但缺少 background、padding、border-radius 等基础代码容器特征。更关键的是：博客园编辑器（富文本模式）会自动把换行、空格、缩进过滤掉，而 <code> 本身不保留空白符 —— 所以你写：
<code>function hello() {
console.log('hi');
}</code>实际渲染出来就是 function hello() { console.log('hi'); } 挤成一行，且无背景色。
- 想显示多行代码？必须用
<pre><code>嵌套，且手动加white-space: pre-wrap或依赖主题 CSS - 博客园后台「设置」→「页面定制 CSS」中可补一句：
code { background: #f6f8fa; padding: 2px 4px; border-radius: 3px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; } - 注意：纯 HTML 模式下粘贴的
<code>内容，若含未转义的<或>，会被浏览器误解析为标签 —— 应先用和 <code>>替换
简书 Markdown 中 <code> 的真实角色
简书用的是 Markdown 解析器（非纯 HTML 渲染），<code> 标签属于「HTML 兼容区块」，但它不会覆盖 Markdown 原生的代码语法。也就是说：
立即学习“前端免费学习笔记（深入）”；
- 用反引号包裹的行内代码：
`console.log()`→ 自动转成<code>console.log()</code></li><li>用三个反引号的代码块：<code><pre class='brush:js;toolbar:false;'> console.log();
→ 转成<pre><code class="js">...</code></pre>，此时<code>是子元素，样式由<pre>主导 - 如果你手写
<code>alert("xss")</code>，简书会原样输出，但其中的双引号必须实体化，否则解析中断 - 简书不支持在
<code>内嵌 HTML 标签（如<strong>），会被当作文本显示，而非渲染
<code> 和 <pre> 在博客园/简书中的分工差异
核心区别就一条：<code> 不保留换行与缩进，<pre> 保留。但两者组合才有意义：
- 单行命令或变量名：用
<code>npm install</code> - 多行函数或配置段落：必须
<pre><code>...</code></pre> - 博客园中，
<pre>默认有上下 margin 和等宽字体，但无背景；简书中<pre><code>会自动加语言类名（如language-python），可用于 Prism.js 高亮 - 如果直接写
<pre>console.log(1)</pre>（没包<code>），语义错误 ——<pre>表示“预格式化文本”，不特指代码；搜索引擎和屏幕阅读器无法识别其技术含义
最容易被忽略的一点：无论博客园还是简书，<code> 的语义价值远大于视觉价值。它告诉机器“这是代码”，而不是“这里要好看”。真要控制样式，优先靠 CSS 修饰 <code> 或 <pre><code>，而不是堆砌 <font> 或内联 style —— 后者在简书会被过滤，在博客园可能失效。
