UI 组件 · 文字
行内代码
Inline Code
也叫：行内代码片段、代码标记、等宽文字、Code Span、Inline Snippet、Monospace Text
夹在一句话中间的一小段代码，比如函数名 useState、命令 npm install、文件名 .env，用等宽字体加浅灰底和正文区分开。
点「标注」看每个部分叫什么。
怎么跟 AI 说
改成你的业务内容再发统一正文里行内代码的样式：用 code 标签，字体 ui-monospace, SFMono-Regular, Menlo, monospace，字号 0.875em（比正文小一点），浅灰底 #F3F4F6、文字 #1F2937、左右内边距 0.3em、圆角 4px，不加边框；深色模式下改成 #2A2D33 底、#E5E7EB 字。长路径和网址允许在任意位置换行（overflow-wrap: anywhere），不要撑出横向滚动条。它只用于函数名、命令、文件名这类代码文字；超过一行的命令改用带复制按钮的代码块；pre 里面的 code 不要套用这套样式。
发给
01判断
你的内容是这样吗？
对照两列，确认行内代码是不是你要找的。
02避坑
常见坏用法
看起来能用，其实会给用户添麻烦。
- 01
拿行内代码当强调用，一段话里十几处灰底，真正的代码反而不显眼
- 02
把一整条长命令塞进行内代码，在手机上撑出横向滚动条，也不好复制
- 03
底色太深或颜色太花，和正文反差太大，读起来一跳一跳的
03识别
怎么认出它
先看整体结构，再对照几个一眼能认出的特征。
结构
一小段等宽字体的文字，带浅灰底色、小内边距和小圆角，嵌在正文句子中间，跟着文字一起换行。
组成部分点一下，在上面的线框里标出来
识别特征
- 1句子中间几个等宽字体的词，带浅灰色的底块
- 2底块很小、带圆角，左右只留一点空隙，和文字在同一行
- 3常见于技术文档和 AI 回复里，内容像 useState、npm install、.env
04解释
详细解释
行内代码用来在正文里标出「这是代码」：函数名、变量名、命令、文件路径、配置项、要原样输入的值，例如「把 token 存到 localStorage」「运行 pnpm dev」。它用 HTML 的 code 标签，样式通常是等宽字体、比正文小一点、浅灰底、左右留一点内边距和小圆角。Markdown 里用一对反引号写出来。
它和 代码块 的区别：代码块是单独成块、多行的代码，带语言标签和复制按钮；行内代码只有几个词，嵌在句子里跟着文字一起换行。它和 快捷键提示 的区别：快捷键提示标的是键盘上的按键（Ctrl、Esc），画成键帽；行内代码是要输入的、或者出现在代码里的文字。也别和 标签 混：标签表示状态和分类，不是代码。
只标真正的代码，不要拿它当强调或高亮。行内代码不要太长，超过一行的命令改用代码块，方便复制。底色要浅，文字和底色的对比度仍然要够；深色模式下单独调一套颜色。长路径、长网址允许在任意位置换行（overflow-wrap: anywhere），不然会把手机页面撑出横向滚动条。
开发者信息术语 ID、DOM 线索、识别优先级
- 术语 ID
component-inline-code- DOM 选择器
插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。
code:not(pre code)
- 类名关键词
类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。
inline-codecode-inlinecode-spancode-textcode-taginline-snippetmono-text
- 组件名
React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。
InlineCodeCodeInlineCodeTextCodeSpan
- 语义标签和角色
弱信号，要和其他线索一起才算识别出来。
<code>
- 结构特征
根据元素的排列和样式算出来的特征，只用来加分，单独不判定。
在文字中间
- 优先级
- 2 · 同一层有多条命中时，优先级高的胜出
- 版本
- v2 · 更新于 2026/09/30