fetch() 是唯一语义正确的行内代码标记，用于函数、命令或变量，确保等宽渲染、行高正常、屏幕阅读器正确朗读； 错误：块级元素会撑开行距，破坏排版。
单行代码必须用 ，不能套 <pre class="brush:php;toolbar:false;"></pre>
在段落中提一个函数、命令或变量时， 是唯一语义正确的选择。比如写“调用 <code>fetch() 时需传入 AbortSignal”，浏览器会以等宽字体渲染，且不破坏行高、不插入额外空白。
-
fetch()✅ 正确：行内、语义清晰、屏幕阅读器读作“fetch 函数” -
<code>fetch()</code>
❌ 错误：是块级元素，自带 margin，塞进段落会撑开上下行距，视觉断裂
- 漏转义
或 <code>>（如写x ）→ 浏览器解析失败，后续 HTML 结构错乱 - 别给
加 <code>white-space: pre：它会让长命令溢出容器，且和周围文本基线对不齐
多行代码必须用 组合，缺一不可
函数体、配置片段、命令输出这类内容，只用
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
会塌成一行，缩进全丢；只用 <pre class="brush:php;toolbar:false;"> 则失去“这是代码”的语义，高亮库（如 highlight.js）无法识别语言，SEO 和读屏器也难理解。
- 正确结构：
<code>function hello() { console.log('hi');}</code>——保格式，<code> 定语义</code>
- 错误写法：
function hello() { console.log('hi');} → 渲染为单行，无缩进 - 错误写法：
function hello() { console.log('hi');}→ 搜索引擎当普通预格式文本，不索引为代码 - HTML 特殊字符必须手动转义：
、<code>>、&，哪怕只是写个比较表达式
语法高亮不是 的职责，得靠 JS 库+正确结构
标签本身不解析语法，也不加颜色。所谓“高亮”，本质是给 <code>const、<code>"string"、// comment 这些 token 打上不同 class，再配 CSS。这一步必须由 Prism.js 或 highlight.js 完成，且只认
<pre class="brush:php;toolbar:false;"> 结构。
hljs.highlightAll() 只扫描 <pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;">，对孤立的 <code> 不生效</code></pre></pre>- 要高亮内联代码（极少见），得手动调
hljs.highlightElement(el)，且 <code>el必须是带 language class 的元素
- 语言必须显式声明：
<code class="javascript">const x = 1;，否则可能被当成 plaintext - 别指望纯 CSS 给
加背景色就能叫“高亮”——那只是样式，不是语法识别
容易被忽略的可访问性与容错细节
很多人加了高亮就以为万事大吉，但真实场景里，JS 加载失败、网络中断、读屏器切换模式都会暴露问题。
- 没加载 highlight.js 时，
<code> 仍能正确显示原始代码——这是底线，别为了“炫酷”牺牲可用性</code>
- 命令行内容该用
kbd 而非 <code>code，比如 npm install，屏幕阅读器会读作“按 npm install 键”而非“n-p-m 空格 i-n-s-t-a-l-l” - 复制按钮若直接取
textContent，可能带行号或首尾空格；应先用el.querySelector('code').innerText提纯 - 所有
font-family必须显式设为等宽栈，例如'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace，别依赖浏览器默认
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
