<code>用于行内代码语义标记，<pre><code>用于多行代码，必须转义HTML特殊字符并配合高亮库使用。
直接用 <code> 标签展示代码，90% 的情况会出错——它只负责语义，不保留格式，也不转义 HTML 字符。
行内代码必须用 <code>，不能套 <pre>
在段落中提函数、变量或命令时，<code> 是唯一语义正确的选择。浏览器会以等宽字体渲染，且不影响行高和基线对齐。
-
fetch()✅ 正确：嵌入在<p>里，读屏器读作“fetch 函数” -
<pre><code>fetch()</code></pre>❌ 错误：<pre>是块级元素，会撑开上下行距，破坏段落流 - 漏转义
<或>（如写x < 5）→ 浏览器尝试解析为标签，后续 DOM 可能错乱 - 别给
<code>加white-space: pre：长命令会横向溢出，且与周围文本基线错位
多行代码必须用 <pre><code> 嵌套结构
函数体、配置片段、命令输出这类内容，单用 <code> 会塌成一行，单用 <pre> 则丢失语义——搜索引擎和高亮库都认不出这是代码。
- 正确写法：
<pre><code class="js">function hello() { console.log('hi'); }</code></pre>——<pre>保缩进换行，<code>定义语义 - 错误写法：
<code>function hello() { ... }</code>→ 所有空格/换行被压缩，渲染为一长串 - 错误写法：
<pre>function hello() { ... }</pre>→ 没有<code>，高亮库（如 highlight.js）无法识别语言，SEO 不友好 -
<pre>默认可能横向溢出，建议加 CSS：overflow-x: auto和tab-size: 2
HTML 特殊字符必须手动转义，没有例外
只要代码里含 <、>、&，就必须转义，否则浏览器会当作标签解析，轻则内容消失，重则整个页面结构崩坏。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 想展示
<div class="box">，必须写成<div class="box"> <li>JS 字符串中的 <code>"不用转义，但 HTML 属性值里的引号要匹配（推荐统一用"包裹属性） - 转义不是可选项：哪怕只是写个比较表达式
a < b && b > c，也得全部转 - 可用工具辅助：VS Code 插件 “Auto Rename Tag” 不管用，得用 “Escape HTML Entities” 类插件，或手写脚本批量处理
- 必须引入 highlight.js 或 Prism.js，并调用
hljs.highlightAll()或Prism.highlightAll() - 高亮库只识别
<pre><code class="html">这种结构，class 值决定语言（如language-js、language-css） - 别试图用纯 CSS 给
<code>写伪高亮：无法区分 token 类型，维护成本高，可访问性差 - 服务端渲染场景下，仍需保持
<pre><code>结构，再由客户端补高亮，否则 SSR 后无法动态生效
语法高亮必须靠 JS 库，<code> 本身不带颜色
<code> 标签只做语义声明和基础等宽渲染，所有关键字、字符串、注释的着色，都依赖外部库解析并打 class。
最容易被忽略的是职责混淆：<pre> 管“怎么显示”，<code> 管“这是什么”。混用、漏嵌套、跳过转义，三者任一出问题，代码就既不好看，也不可靠。
