ホーム/コンポーネント/データ表示/コードブロック CodeBlock

CodeBlock

シンタックスハイライト付きコードブロック。highlight.js ベース、カスタムカラー。

import { CodeBlock } from "@blueai/ui"

Examples

Basic

const greeting = "Hello, World!";
console.log(greeting);

<CodeBlock code={`const greeting = "Hello, World!";
console.log(greeting);`} />

JSX

<FormButton variant="primary" onClick={handleClick}>
  送信する
</FormButton>

<CodeBlock code={`<FormButton variant="primary" onClick={handleClick}>
  送信する
</FormButton>`} />

Without Copy Button

bun add @blueai/ui

<CodeBlock code="bun add @blueai/ui" copyable={false} />

Prop	Type	Default	Description
code*	string	—	表示するソースコード
copyable	boolean	true	コピーボタンの表示