Markdown

Yapay zeka yanıtları için geliştirilmiş Markdown. Akıcı biçimde akar ve yarım yazılmış sözdizimini asla göstermez; bağlantı verilebilen başlıklar, Markdown ya da CSV olarak kopyalanabilen tablolar, GitHub callout'ları, görev listeleri, dipnotlar, görseller, satır içi alıntılar ve eksiksiz kod blokları sunar.

Open in new tab

Genel bakış

Modeller Markdown ile yanıt verir ve onu bir seferde bir token yazar. Sade bir renderer akarken ham yıldızları, yarım kurulmuş tabloları ve kapanmamış kod çitlerini yanıp söndürür. Markdown, tamamlanmamış sözdizimini gidişat içinde tamamlar ve metni Streaming bloğu gibi hızlandırır; böylece biçimlendirme yerinde belirir.

Her öğe HextaUI'nin geri kalanından oluşturulur. Kod çitleri Code Block olur, [!NOTE] gibi GitHub callout'ları Alert kullanır, görev listeleri salt okunur Checkbox kullanır ve tablolar Markdown veya CSV olarak kopyalamak için bir menüyle yana kayar. sources iletin, [1] bir alıntı çipine dönüşür; kodun içindeki işaretlere dokunulmaz.

Başlıklar id'lerini metinlerinden alır ve paylaşmak için isteğe bağlı bir bağlantı simgesi gösterir. Görseller yer tutucu ve açıklamayla tembel yüklenir, dipnotlar işaretlerine geri bağlanır, harici bağlantılar yeni sekmede açılır ve bunu belirtir, metin yönü blok başına algılanır. Akışla gelen yanıtlar kadar README ve changelog'lar için de işe yarar.

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/markdown

Kullanım

AI SDK ile

Bir useChat mesajının her metin parçasını render edin; source-url parçaları kaynakları olur. Parçanın durumu, modelin hâlâ yazıp yazmadığını Markdown'a söyler.

"use client"

import type { UIMessage } from "ai"

import { Markdown } from "@/components/blocks/markdown/markdown"

export function AssistantMessage({ message }: { message: UIMessage }) {
  const sources = message.parts.flatMap((part) =>
    part.type === "source-url"
      ? [{ id: part.sourceId, url: part.url, title: part.title ?? part.url }]
      : []
  )

  return message.parts.map((part, index) =>
    part.type === "text" ? (
      <Markdown
        key={index}
        text={part.text}
        streaming={part.state === "streaming"}
        sources={sources}
      />
    ) : null
  )
}

Statik içerik

README'ler, changelog'lar ya da kayıtlı yanıtlar için children olarak bir dize iletin. Başlıklara insanların paylaşabileceği bir bağlantı vermek için anchors ayarlayın.

import { Markdown } from "@/components/blocks/markdown/markdown"

const changelog = `## 2.4.0

> [!NOTE]
> Requires React 19.

- [x] Faster cold starts
- [x] Copy tables as CSV
- [ ] Offline mode`

export function Changelog() {
  return <Markdown anchors size="base">{changelog}</Markdown>
}

Yapı

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

Parça	Açıklama
`Markdown`	Renderer. Bir dize alır ve hızlandırmayı, ayrıştırmayı ve her öğeyi ele alır.
`MarkdownTable`	Kopyalama menülü kaydırılabilir bir tablo.
`MarkdownAlert`	[!NOTE] ve diğer GitHub uyarı türleri için bir callout.
`MarkdownHeading`	Bir id ve isteğe bağlı bağlantı çapası olan bir başlık.
`MarkdownImage`	Yükleme, hata ve açıklama durumları olan bir görsel.

API referansı

Markdown

Prop	Tür	Varsayılan
`text`Şimdiye kadarki Markdown. Bunun yerine children olarak iletebilirsiniz.	`string`	`–`
`streaming`Metni hızlandırır, imleci gösterir ve tamamlanmamış sözdizimini tamamlar.	`boolean`	`false`
`smooth`Metni alındığı gibi render etmek için hızlandırmayı kapatın.	`boolean`	`true`
`sources`[1]'i sources[0] için bir çipe çevirir ve böyle devam eder. sources yoksa [1] düz metin kalır.	`Source[]`	`[]`
`size`Metin boyutu. Sohbette sm, makalelerde base kullanın.	`"sm" \| "base"`	`"sm"`
`anchors`Başlıklarda bir bağlantı simgesi gösterir.	`boolean`	`false`
`components`a veya img gibi herhangi bir öğeyi geçersiz kılın. Blokların yeniden bağlanmaması için nesneyi kararlı tutun, örneğin bileşenin dışında.	`Components`	`–`
`className`Sarmalayıcı için sınıflar.	`string`	`–`

Klavye

Tuş	Action
`Tab`	Bağlantılar, alıntılar, başlık çapaları, tablo kopyalama menüleri ve kod bloğu eylemleri arasında okuma sırasıyla gezinir.
`Enter`	Bir bağlantıyı ya da bir tablodaki kopyalama menüsünü açar.
`↑↓`	Copy as Markdown ve Copy as CSV arasında gezinir.

Erişilebilirlik

Sarmalayıcı akarken aria-busy ile işaretlenir; böylece ekran okuyucular metnin oturmasını bekler.
Callout'lar canlı uyarılar gibi duyurulmak yerine, türünü etiket olarak taşıyan role=note kullanır.
Görev listesi onay kutuları salt okunurdur ve Tab ile atlanır; bu yüzden kontrol değil durum olarak okunur.
Harici bağlantılar “opens in a new tab” der, alıntı çipleri kaynaklarının adını taşır ve başlık çapaları “Link to …” olarak adlandırılır.
Görseller alt metinlerini, tablolar ise ekran okuyucu gezinmesi için başlık hücrelerini korur.
Azaltılmış harekette imleç atmayı bırakır ve görseller solmadan belirir.

Şunlarla geliştirildi

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

Kod

3 dosya, components/blocks/markdown konumuna eklendi.