CodeBlock

Kurulum

Paket

@bigbang/ui

İçe aktarma

import { CodeBlock } from '@bigbang/ui';

Kaynak

CodeBlock.tsx

Storybook

CodeBlock · Playground

CodeBlock, @bigbang/ui paketindedir. Sözdizimi renklendirme kitaplığı gerektirmez.

import { CodeBlock } from '@bigbang/ui';

<CodeBlock title="config.json" language="json" lineNumbers code={source} />;

Özellikler

codeZorunlu

Açıklama

Gösterilecek kod, yazıldığı gibi. Baştaki ve sondaki boş satırlar atılır.

Tür

string

language

Açıklama

Başlıkta gösterilen dil adı, örneğin tsx ya da json. Yalnızca gösterim içindir; renklendirme yapılmaz.

Tür

string

title

Açıklama

Başlıkta gösterilen dosya adı ya da kısa başlık; kaydırma bölgesini de adlandırır.

Tür

string

lineNumbers

Açıklama

Satır numaralarını gösterir. Ekran okuyucu atlar, kopyalanmazlar.

Tür

boolean

Varsayılan

false

highlightLines

Açıklama

Vurgulanacak satır numaraları, 1'den başlayarak.

Tür

readonly number[]

wrap

Açıklama

Uzun satırları yana kaydırmak yerine alt satıra geçirir.

Tür

boolean

Varsayılan

false

copyable

Açıklama

Kodun tamamını kopyalayan bir düğme gösterir.

Tür

boolean

Varsayılan

true

copyLabel

Açıklama

Kopyala düğmesinin erişilebilir adı. Verilmezse ui.code-block.copy ("Kodu kopyala" ya da "Copy code").

Tür

string

className

Açıklama

Kök öğeye eklenir; yalnızca yerleşim için kullanın.

Tür

string

Veri öznitelikleri

• data-component="code-block": kök öğede.
• data-part: header, language, copy, scroll, line, line-number.
• data-highlighted: vurgulu satırda.