Code Block

主なプロパティ

インストール

pnpm add @tinyrack/ui

@import '@tinyrack/ui/components/code-block.css';

import { TRCodeBlock } from '@tinyrack/ui/components/code-block';

プレイグラウンド

const status = 'healthy';

使用方法

ハイライト付きの例では trShikiWebHighlighter を使います。コピーする前に Shiki を追加してください。

pnpm add shiki

const status = 'healthy';

例

rack-a: 正常

{
  "status": "正常"
}

const region = 'icn';

const message = '狭いドキュメントレイアウト内で折り返される意図的に長い行';

export const Status = () => <span>正常</span>;

export const ready = true;

.status {
  color: green;
}

<span>正常</span>

# ステータス

<Status />

status = 'healthy'

pnpm verify

コピー操作を組み合わせる例では、次のアプリケーション側のインポートも必要です。

import { useState } from 'react';
import { TRButton } from '@tinyrack/ui/components/button';
import '@tinyrack/ui/components/button.css';

API

TRCodeBlock は文法を一切同梱しません。highlighter プロパティか TRCodeHighlighterProvider でハイライターを注入すると、指定できる language の値もその選択に従います。設定方法は シンタックスハイライト を参照してください。

ハイライトはハイドレーション後に実行されます。元のソースは SSR でも安全で、ハイライターが応答する前にも表示されます。code や language を変更すると古い処理をキャンセルし、以前の非同期結果が現在のソースを置き換えないようにします。

ブロックは状態を data-highlight で示します。language がなければ plain、ハイライターの実行中は pending、成功時は highlighted、ハイライターに該当する文法がなければ unsupported、ハイライターを設定していなければ no-highlighter、ハイライターが例外を投げた場合は error です。成功以外のすべての結果で SSR のフォールバックが維持されるため、空のブロックではなく読める形のプレーンテキストが残ります。onHighlightFailure を渡さない場合、コンソールに届くのは error のみで、言語ごとに一度だけです。ハイライター未設定と未対応の言語は、プレーンテキストが正しい表示となる設定上の状態なので通知せず、data-highlight だけで示します。

その他のネイティブ pre 属性とイベントも渡されます。周囲の文脈でソースを識別できない場合は aria-label を追加してください。ハイライトはアクセシブルな原文を変えません。

スタイル

wrap={false} では長い行を横方向にスクロールして表示します。wrap では長いトークンも利用可能な幅で折り返し、どちらのモードも親要素の境界内に収まります。