コードCodeExperimental
本文中の短いコード、コマンド、値を読み分けやすく表示します。
プレビュー
インストールは npm install @gunjo/uiを実行します。
公開時は --access publicフラグを指定します。
状態とバリエーション
表示の強さ
本文中の短いコードやコマンドを、周囲の文章から読み分けやすくします。
npm run dev--watchサイズ
本文の文字サイズに合わせて、コードの大きさを調整します。
size="sm"size="default"size="lg"本文にまぎれたとき
長いコマンドは行の途中で折り返します。背景は行ごとに分かれ、行の高さは本文のままです。
生成物を作り直すときは npx @gunjo/ui-cli generate --config ./design/tokens.config.json を実行します。折り返しても本文の行送りは変わりません。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| variant | "default" | "muted" | "default" | インラインコードの背景と境界線の強さを切り替えます。 |
| size | "sm" | "default" | "lg" | "default" | 本文内で使うコード文字のサイズです。 |
| children | ReactNode | - | 表示するコード文字列です。 |
使い方
import { Code } from "@gunjo/ui";
const example = "const value = 42";
export function InlineCodeUsage() {
return <Code>{example}</Code>;
}