React uygulamanızda kod bloklarını görüntülemek mi istiyorsunuz? Sözdizimi vurgulu kod bloklarını uygulamanıza entegre etmek için bu kılavuzu izleyin.

Web geliştirmede, uygun biçimlendirme ve vurgulama ile kod bloklarını görüntülemek yaygın bir gerekliliktir. Kod blokları, kodu görüntülemek ve kullanıcı katılımını artırmak da dahil olmak üzere çeşitli amaçlar için kullanılabilen çok yönlü bir araçtır.

Kitaplığı Yükleme

Birinci, bir React uygulaması oluştur ve yükleyin tepki kodu blokları kütüphane. Bu kitaplık, uygulamanızda kod bloklarını görüntülemek için kullanılır. Bu kitaplığı, Node.js'nin paket yöneticisi olan npm'yi kullanarak kurabilirsiniz. Terminalinizi açın ve proje dizininize gidin. Ardından aşağıdaki komutu çalıştırın:

npm tepki kodu bloklarını kurun

Bu, projenize tepki-kod-blokları kitaplığını yükleyecektir.

Projenize Kod Bloğu Ekleme

tepki-kod-blokları kitaplığını yükledikten sonra, başlamaya hazırsınız. İlk olarak, içe aktarın kod bloğu uygulamanızdaki tepki kodu blokları kitaplığından bileşen. Dosyanıza aşağıdaki kodu ekleyerek bunu yapabilirsiniz:

instagram viewer 
içe aktarmak { KodBloğu } itibaren"tepki kodu blokları";

Ardından, aşağıdaki kodu ekleyerek uygulamanızda CodeBlock bileşenini kullanın:

 metin='console.log("Merhaba dünya!");'
 dil="javascript"
 showLineNumbers={doğru}
 tema={temanız}
/>

Yukarıdaki kodda, birkaç donanımı CodeBlock bileşenine aktarıyorsunuz. İşte mevcut tüm donanımların bir listesi:

  • metin (gerekli): Kod bloğunda görüntülenecek kod.
  • dil (gerekli): Kodun programlama dili. Bu için kullanılır kod bloğunun sözdizimi vurgulaması.
  • satır numaralarını göster: Kod bloğunda satır numaralarının gösterilip gösterilmeyeceğini gösteren bir boole değeri. Varsayılan olarak false olur.
  • tema:Kod bloğu için kullanılacak tema. Bu yerleşik bir tema veya özel bir tema nesnesi olabilir. Varsayılan olarak GitHub'dır.
  • başlangıçSatırNumarası: Saymaya başlanacak satır numarası. Varsayılan olarak 1'dir.
  • kod bloğu: Kod bloğu için seçenekleri içeren bir nesne. Bu içerebilir Satır numaraları (satır numaralarının görüntülenip görüntülenmeyeceğini gösteren bir boole) ve Sarma hatları (satırların kaydırılıp kaydırılmayacağını gösteren bir boole değeri).
  • tıklamada: Kod bloğu tıklandığında çağrılacak bir işlev.

İşte tüm bu donanımların nasıl kullanılacağına dair bir örnek:

içe aktarmak { KodBloğu } itibaren"tepki kodu blokları";
işlevBileşenim() {
sabit handleClick = () => {
konsol.kayıt("Kod bloğu tıklandı");
 };
geri dönmek (
 metin='const selamlama = "Merhaba dünya!"; console.log (selamlama);'
 dil="javascript"
 showLineNumbers={doğru}
 tema="atom-bir-karanlık"
 başlangıçSatırNumarası={10}
 kodBloğu={{ Satır numaraları: YANLIŞ, Sarma hatları: doğru }}
 onClick={handleClick}
 />
 );
}

Yukarıdaki kodda, kullanıyorsunuz atom-bir-karanlık tema, satır numaralarını 10'dan başlatma, satır numaralarını devre dışı bırakma, satır kaydırmayı etkinleştirme ve bir tıklama işleyicisi ekleme.

Bu donanımları kullanarak, kod bloklarınızın görünümünü ve davranışını ihtiyaçlarınıza göre özelleştirebilirsiniz.

Kod Bloklarınıza Tema Ekleme

tepki kodu blokları kitaplığı, kod bloklarınızın görünümünü özelleştirmek için kullanılabilecek çeşitli yerleşik temalar sağlar. Yerleşik bir temayı kullanmak için temanın adını belirtmeniz yeterlidir. tema pervane Örneğin, kullanmak için atom-bir-karanlık tema, aşağıdaki kodu kullanırsınız:

 metin='console.log("Merhaba dünya!");'
 dil="javascript"
 showLineNumbers={doğru}
 tema="atom-bir-karanlık"
/>

Yerleşik temalara ek olarak, kod bloğunun farklı bölümleri için kullanılacak renkleri belirten bir JavaScript nesnesi tanımlayarak özel temalar da oluşturabilirsiniz. Aşağıda, özel bir tema nesnesinin nasıl görünebileceğine dair bir örnek verilmiştir:

sabit benim Özel Temam = {
 satırNumarasıRenk: "#ccc",
 satırNumaraBgRenk: "#222",
 arka plan rengi: "#222",
 metinRengi: "#ccc",
 alt dizeRengi: "#00ff00",
 anahtar kelimeRenk: "#0077ff",
 öznitelikRenk: "#ffaa00",
 seçiciEtiketRengi: "#0077ff",
 docTagColor: "#aa00ff",
 isimRenk: "#f8f8f8",
 Yerleşik Renk: "#0077ff",
 değişmezRenk: "#ffaa00",
 madde işaretiRengi: "#ffaa00",
 kodRengi: "#ccc",
 ekRenk: "#00ff00",
 normal ifadeRengi: "#f8f8f8",
 sembolRenk: "#ffaa00",
 değişkenRenk: "#ffaa00",
 şablonDeğişkenRenk: "#ffaa00",
 bağlantı rengi: "#aa00ff",
 seçiciÖznitelikRengi: "#ffaa00",
 seçiciPseudoColor: "#aa00ff",
 tipRenk: "#0077ff",
 dizeRengi: "#00ff00",
 seçiciIdColor: "#ffaa00",
 alıntıRengi: "#f8f8f8",
 şablonTagRengi: "#ccc",
 silmeRengi: "#ff0000",
 başlıkRenk: "#0077ff",
 bölümRenk: "#0077ff",
 yorum rengi: "#777",
 metaKeywordColor: "#f8f8f8",
 metaColor: "#aa00ff",
 işlevRengi: "#0077ff",
 sayıRenk: "#ffaa00",
};

Özel bir tema kullanmak için, tema nesnesini CodeBlock bileşeninin tema pervanesi olarak geçirirsiniz:

 metin='console.log("Merhaba dünya!");'
 dil="javascript"
 showLineNumbers={doğru}
 theme={myCustomTheme}
/>

Çıktı aşağıdadır:

Yerleşik ve özel temaları kullanarak, kod bloklarınızın görünümünü ihtiyaçlarınıza ve uygulamanızın genel tasarımına uyacak şekilde özelleştirebilirsiniz.

Projenize CopyBlock Ekleme

Kopyalama işlevini kod bloklarınıza eklemek isterseniz, Kopyalama Bloğu tepki-kod-blokları kitaplığı tarafından sağlanan bileşen. Bu bileşeni kullanmak için, panoya kopyala kütüphane de. CopyBlock bileşenini projenize nasıl ekleyeceğiniz aşağıda açıklanmıştır:

Yükle panoya kopyala kütüphane:

npm install tepki-kopyala-panoya

Gerekli bileşenleri ve kitaplıkları içe aktarın:

içe aktarmak { Kopyalama Engelleme } itibaren'tepki kodu blokları';
içe aktarmak { FaKopya } itibaren'tepki simgeleri/fa';
içe aktarmak kopyalamak itibaren'panoya kopyala';

Kodunuzda CopyBlock bileşenini kullanın:

sabit kod = 'console.log("Merhaba dünya!");';
sabit dil = "javascript";
 metin={kod}
 dil={dil}
 showLineNumbers={doğru}
 sarma satırları={doğru}
 tema="drakula"
 kod bloğu
 simge={}
 onCopy={() => kopyala (kod)}
/>

Çıktı aşağıdadır:

CopyBlock bileşenini projenize ekleyerek, kullanıcıların kod bloklarınızdaki kodu panolarına kopyalamasına kolayca izin verebilirsiniz.

Kod Blokları Eklemek için Alternatif Yöntemler

React-code-blocks kitaplığını kullanmak, React uygulamanıza kod blokları eklemenin en basit yolu olsa da, kullanabileceğiniz birkaç alternatif yöntem de vardır:

  1. Sözdizimi vurgulamayı manuel olarak ekleme: Bir kitaplık kullanmak istemiyorsanız, kodunuza manuel olarak sözdizimi vurgulaması ekleyebilirsiniz. Tailwind CSS'yi kullanma veya normal CSS. Bu, uygun stilleri uygulamak için kod öğelerinize CSS sınıfları eklemeyi içerir. Bu yöntem size stiller üzerinde daha fazla kontrol sağlarken, kurulumu ve bakımı zaman alıcı olabilir.
  2. Diğer kitaplıkları kullanma: Kod için sözdizimi vurgulama sağlayan birkaç başka kitaplık vardır, örneğin tepki-sözdizimi-vurgulayıcı, prizma-tepki oluşturucu, Ve vurgulama.js. Bu kitaplıkların farklı özellikleri ve stilleri vardır, bu nedenle ihtiyaçlarınıza uygun olanı seçebilirsiniz.

React-code-blocks kitaplığı çoğu uygulama için harika bir seçim olsa da, bu alternatif yöntemler belirli durumlarda yararlı olabilir. Sonuç olarak, seçeceğiniz yöntem, özel ihtiyaçlarınıza ve tercihlerinize bağlı olacaktır.

Kod Bloklarıyla Kullanıcı Etkileşimini Artırın

Kodu açıklamak, etkileşimli kodlama örnekleri sağlamak ve görsel olarak oluşturmak için kod bloklarını kullanarak çekici tasarımlar, kullanıcılarınızın deneyimini geliştirebilir ve onları web sitenizle veya başvuru. Ek olarak, CopyBlock gibi özellikleri ve özel temaları kullanarak React uygulamanızı daha işlevsel ve çekici hale getirebilirsiniz.