组件 · 数据展示
InlineCode
A name from code inside a sentence — a variable, a key, a file name — set in Space Mono on a sunken fill.
import { InlineCode } from "@botiverse/raft-ui";A piece of code inside running text: a variable, a key or a file name, such as RAFT_TOKEN or raft.config.ts. It stays part of the sentence. For a command people copy, use CopyableCode; for several lines, use CodeBlock.
When to use
| Situation | Use |
|---|---|
| A variable, key or file name in a sentence | InlineCode |
| One command people copy and run, such as connecting a computer or installing the CLI | CopyableCode |
| Several lines of code, or a log | CodeBlock |
| A task number or another ID in text | Space Mono text, without the fill (Typography) |
Anatomy
InlineCode: acodeelement. Its text is the code.
Variants
| Variant | Use for |
|---|---|
appearance="default" | Running text outside messages, such as docs and descriptions |
appearance="message" | Inside a message body: sits on the text baseline and breaks inside long paths and hashes instead of overflowing the message |
Content
- Write the code exactly as it is typed, with its own casing.
- Don't put a whole command in it. A command people run goes in CopyableCode.
Rules
- Set inline code in Space Mono at 0.875 times the size of the text around it, so a run of code doesn't crowd the sentence.
- Put it on
fill-mutedwithradius-stickerand no border.
API
InlineCode
| Prop | 类型 | 默认值 |
|---|---|---|
| `message` renders the borderless, baseline-aligned in-message treatment. | "default" | "message" | "default" |
Also takes the attributes of its element.
相关组件
改动
- 0.9.3 · Fixed
InlineCodein a message centres its letters in the fill (they sat about 0.6px low).