Code

Monospace kod: ya satır içinde tray bir etikette ya da çok satırlı bir blok olarak. Sözdizimi renklendirmesi sana bırakılmıştır.

@merid/react/styles.css stil dosyasını bir kez import et.

<Text>
<Code>@merid/react/styles.css</Code> stil dosyasını bir kez import et.
</Text>

Import

tsx

import { Code } from "@merid/react";

variant="block", çok satırlı kod parçaları için <pre><code> render'lar. Boşluklar korunur, uzun satırlar yatayda kaydırılır.

npm i @merid/react
import "@merid/react/styles.css";

<Code variant="block">
{'npm i @merid/react\nimport "@merid/react/styles.css";'}
</Code>

Code, ref'ini <code>'a (inline) ya da <pre>'ye (block) iletir ve diğer HTML attribute'larını o elemana aktarır.

Prop	Tip	Varsayılan	Açıklama
`variant`	`"inline" \| "block"`	`"inline"`	inline, tray bir etiket içinde <code> render'lar; block, <pre><code> render'lar.

Seçici	Değerler
`.mrd-code`	Kök: <code> ya da <pre>
`data-variant`	`inline` · `block`

Renklendirme eklemek için children'ı önceden renklendirilmiş olarak ver ya da içteki code elemanına highlighter'ının çıktısına göre stil ver.

Kod düz metin olarak okunur. Yatayda taşan bir bloğa klavyeyle ulaşılabilmeli; kod parçaları geniş olabiliyorsa bloğa tabIndex={0} ve bir aria-label ekle.

Yap

Cümle içindeki tanımlayıcılar, dosya adları ve kısa komutlar için inline Code kullan.

Kaçın

“Teknik” bir görünüm için paragrafların tamamını ya da arayüz etiketlerini Code ile sarmak.