Code Block

Yapay zeka yanıtları için geliştirilmiş kod blokları. Akışa ayak uyduran sözdizimi vurgulama, kopyalama, indirme ve satır kaydırma, satır numaraları ve vurgulanmış satırlar, kabul ve reddetme seçenekli fark görünümleri ve komutlar için bir terminal.

Open in new tab

Genel bakış

Bir yapay zeka yanıtındaki kod birkaç karakter birkaç karakter gelir, çoğu zaman birinin onaylaması gereken bir fark olarak. Code Block akarken vurgular, okuyucu yukarı kaydırmadıysa yeni satırları izler ve kod tamamlanana kadar kopyalama, indirme ve satır kaydırmayı yoldan çekilmiş tutar.

Vurgulama, GitHub'ın açık ve koyu temalarıyla Shiki kullanır ve dil başına isteğe bağlı olarak yüklenir. Metin geldikçe yalnızca yeni satırlar tokenlenir; bu yüzden uzun dosyalar hızlı kalır ve renk şeması değişince parlamasın diye iki tema birlikte render edilir. 16 satırdan uzun bloklar “Show all” arkasında katlanır.

Birleşik bir fark iletirseniz eski ve yeni satır numaralarını, bir değişiklik sayısını ve renkli satırları alırsınız; kopyalama farkı değil yeni sürümü verir. Bir gözden geçirme eklerseniz okuyucu, blok odaktayken ⌘↵ ve ⌘⌫ ile değişikliği kabul veya reddedebilir. CodeFence aynı bloğu Streamdown'a takar, CodeTerminal ise komutları çıktıları ve çıkış koduyla gösterir.

Kurulum

Pro registry'yi components.json dosyasına ekleyin

components.json

{
  "registries": {
    "@hextaui-pro": {
      "url": "https://hextaui.com/r/pro/{name}.json",
      "headers": {
        "Authorization": "Bearer ${HEXTAUI_PRO_TOKEN}"
      }
    }
  }
}

Token'ınızı ekleyin
Hesap sayfanızda bir token oluşturun ve .env.local dosyasına HEXTAUI_PRO_TOKEN olarak ekleyin.

Bloğu ekleyin

pnpm dlx shadcn@latest add @hextaui-pro/code-block

Kullanım

Streamdown ile Markdown içinde

CodeFence'i bir renderer olarak kaydedin. title="app/page.tsx", {2,4-6} ve showLineNumbers gibi dil ve çit ayarlarını okur, çit hâlâ akarken vurgulamayı sürdürür.

"use client"

import { Streamdown } from "streamdown"

import { CodeFence, codeFenceLanguages } from "@/components/blocks/code-block/code-fence"

export function Answer({
  markdown,
  streaming,
}: {
  markdown: string
  streaming: boolean
}) {
  return (
    <Streamdown
      mode="streaming"
      isAnimating={streaming}
      plugins={{
        renderers: [{ language: codeFenceLanguages, component: CodeFence }],
      }}
    >
      {markdown}
    </Streamdown>
  )
}

Bir değişikliği gözden geçirme

Önerilen bir düzenlemeyi fark olarak gösterin ve okuyucunun, blok odaktayken ⌘↵ ve ⌘⌫ ile kabul veya reddetmesine izin verin.

"use client"

import * as React from "react"

import { CodeBlock, type ReviewStatus } from "@/components/blocks/code-block/code-block"

export function ProposedEdit({
  patch,
  onAccept,
  onReject,
}: {
  patch: string
  onAccept: () => Promise<void>
  onReject: () => void
}) {
  const [status, setStatus] = React.useState<ReviewStatus>("pending")

  return (
    <CodeBlock
      code={patch}
      language="tsx"
      filename="components/search.tsx"
      diff
      review={{
        status,
        onAccept: async () => {
          await onAccept()
          setStatus("accepted")
        },
        onReject: () => {
          onReject()
          setStatus("rejected")
        },
      }}
    />
  )
}

Tek başına

Kodu ve dili doğrudan iletin; örneğin bir araç çağrısı dosya içeriği döndürdüğünde.

import { CodeBlock } from "@/components/blocks/code-block/code-block"

export function FileContents({ path, contents }: { path: string; contents: string }) {
  return (
    <CodeBlock
      code={contents}
      language={path.split(".").pop()}
      filename={path}
      lineNumbers
      highlight={[3, 4]}
    />
  )
}

Yapı

Dıştan içe doğru birleştirdiğiniz parçalar.

Parça	Açıklama
`CodeBlock`	Blokun kendisi: başlık, eylemler, kod ve isteğe bağlı gözden geçirme çubuğu.
`CodeFence`	Çitli kodu bir CodeBlock'a dönüştüren bir Streamdown renderer'ı.
`CodeTerminal`	Akan çıktısı ve çıkış durumuyla bir komut.
`CopyButton, DownloadButton, WrapToggle`	Başlık eylemleri, kendi başlıklarınız için dışa aktarılır.
`LanguageIcon`	Başlıkta kullanılan dil işareti.

API referansı

CodeBlock

Prop	Tür	Varsayılan
`code`Kaynak ya da diff ayarlıysa birleşik bir fark.	`string`	`–`
`language`tsx, py veya bash gibi Shiki dil id'si ya da takma adı. Bilinmeyen id'ler düz metin olarak render edilir.	`string`	`–`
`filename`Başlıkta gösterilir ve indirmeler için kullanılır.	`string`	`–`
`streaming`Vurgulamayı artımlı tutar, yeni satırları izler ve eylemleri devre dışı bırakır.	`boolean`	`false`
`diff`Kodu birleşik fark olarak ele alır.	`boolean`	`false`
`lineNumbers`Satır numaralarını gösterir. Farklar, false yapılmadıkça bunları gösterir.	`boolean`	`–`
`startLine`İlk satırın numarası.	`number`	`1`
`highlight`İşaretlenecek satır numaraları.	`number[]`	`[]`
`defaultWrap`Uzun satırlar sarılmış olarak başlar.	`boolean`	`false`
`collapseAfter`Bu satır sayısından uzunsa daraltır. 0 hiçbir zaman daraltmaz.	`number`	`16`
`actions`Başlıkta yerleşik olanlardan önce ek kontroller.	`ReactNode`	`–`
`onApply`“Applied” ile onaylanan bir Apply düğmesi gösterir.	`() => unknown`	`–`
`review`Beklerken gözden geçirme çubuğunu, kabul veya red sonrasında bir rozet gösterir.	`CodeBlockReview`	`–`

CodeBlockReview

Prop	Tür	Varsayılan
`status`Geçerli karar.	`"pending" \| "accepted" \| "rejected"`	`–`
`onAccept`Accept veya ⌘↵ ile çağrılır.	`() => void`	`–`
`onReject`Reject veya ⌘⌫ ile çağrılır.	`() => void`	`–`

CodeFence

Streamdown ile kaydedin: plugins={{ renderers: [{ language: codeFenceLanguages, component: CodeFence }] }}.

Prop	Tür	Varsayılan
`code`Çit içeriği, Streamdown'dan.	`string`	`–`
`language`Çit dili, Streamdown'dan.	`string`	`–`
`meta`Dilden sonraki her şey: title="…", {1,3-5}, showLineNumbers, startLine=10.	`string`	`–`
`isIncomplete`Çit hâlâ açıkken true.	`boolean`	`–`

CodeTerminal

Prop	Tür	Varsayılan
`command`Çalıştırılan komut.	`string`	`–`
`output`Şimdiye kadarki çıktı. Aktıkça ekleyin.	`string`	`""`
`running`Bir spinner gösterir ve yeni çıktıyı izler.	`boolean`	`false`
`exitCode`Bittiğinde gösterilir. 0 dışındaki her şey başarısız olarak işaretlenir.	`number`	`–`
`title`Başlık etiketi.	`string`	`"Terminal"`

Klavye

Tuş	Action
`Tab`	Başlık eylemleri, kod alanı ve Show all arasında gezinir.
`⌘↵`	Odak blok içindeyken bekleyen bir gözden geçirmeyi kabul eder.
`⌘⌫`	Odak blok içindeyken bekleyen bir gözden geçirmeyi reddeder.
`←→`	Kod alanı odaktayken uzun satırları kaydırır.

Erişilebilirlik

Kod alanı, dosyanın adını taşıyan odaklanabilir bir bölgedir, örneğin “app/page.tsx code”; böylece klavye kullanıcıları kaydırabilir.
Değişen satırlar renge bağımlı değildir. + ve − işaretleri yalnızca görseldir; ekran okuyucular bunun yerine her değişen satırdan önce “added” veya “removed” duyar.
Copy “Copied” duyurur ve her simge düğmesinin bir etiketi ve tooltip'i vardır.
Gözden geçirme kısayolları bir alana yazarken yok sayılır; böylece tuş vuruşlarını asla çalmaz.

Şunlarla geliştirildi

Code Block bloğunun yapıldığı ücretsiz HextaUI bileşenleri. Her biri tek başına yüklenir.

Kod

9 dosya, components/blocks/code-block konumuna eklendi.