展示
Code 行内代码
句子里的一个函数名，或者一个 flag。
用法
什么时候用它
import { Code } from '@misoto22/design'说明
一个函数名、一个 flag、一个文件名——长在句子里面。
渲染成 <code>，因为这就是表达这件事的那个元素。一个套了等宽字体的 <span> 看上去一模一样，对读屏软件却什么都没说——而“pass 杠 杠 force”并不是那句话原本要说的东西。
尺寸用 em 而不是像素，所以这个小块跟着它旁边的字号走——Kbd 遵守的是同一条规则，理由也一样：定死成一个值，同一个标识符会因为落在正文、图注还是表格单元格里，在一个页面上长出三种大小。
块状的那个是 CodeBlock。这一个天生就是行内的：它不画 plate，不保留空白，多行字符串传进来会被压成一行。
结构
| 部件 | 说明 |
|---|---|
| Chip必填 | A real <code> on the --radius-sm corner, filled with --stone. Sized at 0.85em rather than in pixels, so the same token is proportionate in body copy, in a caption and in a table cell. |
实践建议
推荐
- Use it for anything the reader would type or the machine would read: a flag, a path, a function, an env var name. The mono face is the signal that the string is literal.
- Let it inherit its size. It is set in em on purpose — fixed at one pixel value, the identical token comes out three different sizes on one page depending on where it landed.
避免
- Do not hand it a multi-line string. It keeps no whitespace and draws no plate, so the snippet collapses into one run — that is CodeBlock’s job.
- Do not style a <span> to look like this instead. The element is the whole point: a mono span reads identically and tells a screen reader nothing, and "pass dash dash force" is not what the sentence said.
示例
inline
A real <code> element, sized in em so the same token is proportionate in body copy and in a caption. The element is the point rather than the mono face: a styled span reads identically and tells a screen reader nothing, so "pass dash dash force" is what gets announced.
Pass --force to overwrite dist/, and read the merge helper in src/lib/cn.ts.
At the small step it tracks down with the sentence: --force.
a literal or a key
The two chips a reader cannot tell apart by eye, in one sentence each. Code is a literal the machine reads and a person types out; Kbd is a key they press. The choice is entirely about meaning, because the elements are announced differently — and a code chip shaped like a key invites a press nothing answers.
Press ⌘ K to open the palette, then type Markdown to reach the component.
The flag is --force; the key that cancels the run is Esc.
a list of flags
The same chip in a definition list, where the type around it is smaller. It is sized at 0.85em rather than in pixels, so it is proportionate in a term column, in body copy and in a table cell without anyone choosing a size — and it keeps no whitespace, so a multi-line string handed to it collapses into one run. That case is CodeBlock.
--force- Overwrites
dist/instead of failing on it. --filter- Runs in one workspace package.
--dry-run- Prints what would be published, and publishes nothing.
无障碍
- 渲染 <code>，辅助技术靠它才知道这一段是字面量而不是正文。