Code Block

Kopyalanabilir ve daraltılabilir kaynak kodu sunumu.

CodeBlock.tsx

Kurulum

shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:

$npx shadcn@latest add https://ui.cagriozay.com.tr/r/code-block.json

Kullanım Örneği

import { CodeBlock } from "@/components/ui/CodeBlock"

<CodeBlock
  code={source}
  language="tsx"
  title="Button.tsx"
  showLineNumbers
  highlightLines={[3, 4]}
  collapsible
/>

Özellikler & Parametreler (API)

Prop	Tür	Varsayılan	Açıklama
code	string	—	Boşlukları korunarak gösterilen kaynak kod.
language	string	"typescript"	Başlık alanındaki dil etiketi.
title	string	—	Dosya adı veya kod başlığı.
showLineNumbers	boolean	false	Satır numaralarını gösterir.
copyable	boolean	true	Panoya kopyalama aksiyonunu gösterir.
collapsible	boolean	false	Kod alanını daraltılabilir hale getirir.
maxHeight	string \| number	280	Daraltılmış görünümün maksimum yüksekliği.
variant	"dark" \| "blueprint" \| "terminal" \| "minimal"	"dark"	Kod yüzeyinin renk teması.
highlightLines	number[]	—	Vurgulanacak bir tabanlı satır numaraları.
onCopy	(code: string) => void	—	Kopyalama başarılı olduğunda çağrılır.
onCopyError	(error: unknown) => void	—	Kopyalama başarısız olduğunda çağrılır.