Code
Inline code tokens that stay readable inside prose, lists, and dense metadata.
Contract
TRCode renders a semantic <code> element for short, inline machine-readable text. It accepts native code-element props, className, style, and ref, and inherits the surrounding font size. Use Code Block for standalone code samples.
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/code.css';Scroll inside the code area to read long lines.
Imports
import { TRCode } from '@tinyrack/ui/components/code';Scroll inside the code area to read long lines.
Playground
Edit the content to check short commands, long identifiers, or multiline fragments. Reset restores the default inline command.
Usage
Examples
Content contexts permalink
Inline code keeps its semantic surface in prose, configuration, and long tokens.
API
TRCodeProps extends React's native ComponentProps<'code'>. The default font size is inherited from surrounding prose. break-spaces and overflow-wrap: anywhere preserve whitespace while long tokens wrap inside their context. Line decorations are sliced, so the padding and border sit at the start and end of a wrapped run rather than on every line, which keeps the code within its container.
| CSS token | Default | Purpose |
|---|---|---|
--tr-code-background | --tinyrack-surface-muted | Inline code surface |
--tr-code-border | --tinyrack-border | Decorative hairline |
--tr-code-border-width | --tinyrack-border-width-default | Border thickness |
--tr-code-color | --tinyrack-text | TRCode text |
--tr-code-font-family | --tinyrack-font-mono | Code typeface |
--tr-code-font-size | inherit | Surrounding text size |
--tr-code-line-height | --tinyrack-leading-sm | Multiline rhythm |
--tr-code-radius | --tinyrack-radius-sm | Corner radius |
--tr-code-padding-x | --tinyrack-space-xs | Inline padding |
--tr-code-padding-y | --tinyrack-space-3xs | Block padding |