コードブロックCodeBlockExperimental
ファイル名、言語ラベル、コピー操作付きでコードブロックを表示します。
プレビュー
tsformat-status.ts
type Status = "draft" | "published"; export function formatStatus(status: Status) { return status === "published" ? "公開中" : "下書き";}状態とバリエーション
ヘッダー付き
言語、ファイル名、コピー操作をヘッダーにまとめます。言語ラベルは先頭に置き、何のコードかを先に判断できます。
htmlindex.html
<section class="product-card"> <img src="/images/sample.jpg" alt="Gunjo UI preview" /> <h2>Gunjo UI</h2> <p>Build consistent interfaces with reusable components.</p></section>ハイライトと行番号
長いコードを読む時は、行番号とハイライトを表示して参照しやすくします。ダブルクリックでソース全体を選択できます。
tsformat-status.ts
type Status = "draft" | "published"; export function formatStatus(status: Status) { return status === "published" ? "公開中" : "下書き";}編集可能
サンプルコードをその場で試す用途では、編集できるコードブロックとして表示できます。コピー操作は現在の入力内容を対象にします。
tsformat-status.ts
配色の切り替え
周囲の背景や文脈に合わせて、dark / light / muted の配色を選べます。
htmlindex.html
<section class="product-card"> <img src="/images/sample.jpg" alt="Gunjo UI preview" /> <h2>Gunjo UI</h2> <p>Build consistent interfaces with reusable components.</p></section>tsformat-status.ts
type Status = "draft" | "published"; export function formatStatus(status: Status) { return status === "published" ? "公開中" : "下書き";}jsoncomponent.json
{ "component": "CodeBlock", "language": "json", "copyable": false}コピーなし
短い例やコピー不要の断片では、コピー操作を非表示にできます。
json
{ "component": "CodeBlock", "language": "json", "copyable": false}プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| code | string | - | 表示するコード文字列です。 |
| filename | string | - | ヘッダーに表示するファイル名です。 |
| language | string | - | ファイル名の横に表示する言語ラベルです。 |
| copyable | boolean | true | コピー操作のボタンを表示するかどうかです。 |
| copyLabel | string | "Copy code" | コピー前のボタンラベルとツールチップです。 |
| copiedLabel | string | "Copied" | コピー後に一時表示するラベルです。 |
| copiedDuration | number | 5000 | コピー後のラベルを表示し続ける時間です。単位はミリ秒です。 |
| showLineNumbers | boolean | false | 各行の左側に行番号を表示します。 |
| highlight | boolean | false | 主要なコード要素に軽量なシンタックスハイライトを適用します。 |
| editable | boolean | false | コードを直接編集できる入力領域として表示します。 |
| onCodeChange | (code: string) => void | - | 編集可能なコードの変更時に呼び出されます。 |
| selectOnDoubleClick | boolean | true | コード領域をダブルクリックした時にソース全体を選択します。 |
| theme | "dark" | "light" | "muted" | "dark" | コードブロックの配色を切り替えます。 |
使い方
Loading...