Code
本文、リスト、密度の高いメタデータでも読みやすいインラインコードトークンです。
主なプロパティ
TRCode は、短いインラインの機械可読テキスト用にセマンティックな <code> 要素をレンダリングします。code 要素のネイティブ属性、className、style、ref を受け取り、周囲のフォントサイズを継承します。独立したコード例には Code Block を使用してください。
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/code.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRCode } from '@tinyrack/ui/components/code';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
内容を編集すると、短いコマンド、長い識別子、複数行の断片を確認できます。リセットすると既定のインラインコマンドに戻ります。
使用方法
例
コンテンツの文脈 パーマリンク
インラインコードは、本文、設定値、長いトークンでもセマンティックな表現を保ちます。
API
TRCodeProps は React のネイティブな ComponentProps<'code'> を拡張します。既定のフォントサイズは周囲の本文から継承されます。break-spaces と overflow-wrap: anywhere により、空白を保ちながら長いトークンがコンテキスト内で折り返します。行装飾は分割されるため、余白と境界線は各行ではなく折り返し全体の先頭と末尾に付き、コードがコンテナからはみ出しません。
| CSS トークン | 既定値 | 用途 |
|---|---|---|
--tr-code-background | --tinyrack-surface-muted | インラインコードの背景 |
--tr-code-border | --tinyrack-border | 装飾境界線の色 |
--tr-code-border-width | --tinyrack-border-width-default | 境界線の太さ |
--tr-code-color | --tinyrack-text | コードの文字色 |
--tr-code-font-family | --tinyrack-font-mono | コードの書体 |
--tr-code-font-size | inherit | 周囲の文字サイズ |
--tr-code-line-height | --tinyrack-leading-sm | 複数行のリズム |
--tr-code-radius | --tinyrack-radius-sm | 角の丸み |
--tr-code-padding-x | --tinyrack-space-xs | インライン方向の余白 |
--tr-code-padding-y | --tinyrack-space-3xs | ブロック方向の余白 |