Cara Menambahkan Blok Kode di Aplikasi React Anda

Dalam pengembangan web, menampilkan blok kode dengan pemformatan dan penyorotan yang tepat adalah persyaratan umum. Blok kode adalah alat serbaguna yang dapat digunakan untuk berbagai tujuan, termasuk menampilkan kode dan meningkatkan keterlibatan pengguna.

Menginstal Perpustakaan

Pertama, membuat aplikasi Bereaksi dan instal reaksi-kode-blok perpustakaan. Pustaka ini digunakan untuk menampilkan blok kode di aplikasi Anda. Anda dapat menginstal pustaka ini menggunakan npm, pengelola paket untuk Node.js. Buka terminal Anda dan arahkan ke direktori proyek Anda. Kemudian jalankan perintah berikut:

npm install react-code-blocks

Ini akan menginstal pustaka react-code-blocks di proyek Anda.

Menambahkan Blok Kode ke Proyek Anda

Setelah Anda menginstal perpustakaan react-code-blocks, Anda siap untuk memulai. Pertama, impor file CodeBlock komponen dari pustaka react-code-blocks di aplikasi Anda. Anda dapat melakukan ini dengan menambahkan kode berikut ke file Anda:

impor { Blok Kode } dari"reaksi-kode-blok";

Kemudian, gunakan komponen CodeBlock di aplikasi Anda dengan menambahkan kode berikut:

 teks='console.log("Halo, dunia!");'
 bahasa='javascript'
 showLineNumber={BENAR}
 tema={Tema Anda}
/>

Dalam kode di atas, Anda meneruskan beberapa alat peraga ke komponen CodeBlock. Berikut adalah daftar semua alat peraga yang tersedia:

• teks (wajib): Kode yang akan ditampilkan di blok kode.
• bahasa (wajib): Bahasa pemrograman kode. Ini digunakan untuk penyorotan sintaks dari blok kode.
• showLineNumbers: Nilai boolean yang menunjukkan apakah akan menampilkan nomor baris di blok kode atau tidak. Standarnya salah.
• tema: Tema yang akan digunakan untuk blok kode. Ini bisa berupa tema bawaan atau objek tema khusus. Ini default ke GitHub.
• mulaiNomor Baris: Nomor baris untuk mulai menghitung. Standarnya adalah 1.
• codeBlock: Objek yang berisi opsi untuk blok kode. Ini bisa termasuk barisNumber (boolean yang menunjukkan apakah akan menampilkan nomor baris atau tidak) dan wrapLines (boolean yang menunjukkan apakah akan membungkus baris atau tidak).
• onClick: Fungsi untuk memanggil ketika blok kode diklik.

Berikut adalah contoh bagaimana menggunakan semua alat peraga ini:

impor { Blok Kode } dari"reaksi-kode-blok";
fungsiKomponen Saya() {
const handleClick = () => {
menghibur.catatan("Blok kode diklik");
 };
kembali (
 teks='const salam = "Halo, dunia!"; console.log (salam);'
 bahasa='javascript'
 showLineNumber={BENAR}
 tema='atom-satu-gelap'
 nomorgarisawal={10}
 blok kode={{ barisNumber: PALSU, wrapLines: BENAR }}
 onClick={handleClick}
 />
 );
}

Dalam kode di atas, Anda menggunakan atom-satu-gelap tema, memulai nomor baris pada 10, menonaktifkan nomor baris, mengaktifkan pembungkusan baris, dan melampirkan penangan klik.

Dengan menggunakan alat peraga ini, Anda dapat menyesuaikan tampilan dan perilaku blok kode agar sesuai dengan kebutuhan Anda.

Menambahkan Tema di Blok Kode Anda

Pustaka react-code-blocks menyediakan berbagai tema bawaan yang dapat digunakan untuk menyesuaikan tampilan blok kode Anda. Untuk menggunakan tema bawaan, Anda hanya perlu menentukan nama tema di tema menopang. Misalnya, untuk menggunakan atom-satu-gelap tema, Anda akan menggunakan kode berikut:

 teks='console.log("Halo, dunia!");'
 bahasa='javascript'
 showLineNumber={BENAR}
 tema='atom-satu-gelap'
/>

Selain tema bawaan, Anda juga dapat membuat tema khusus dengan menentukan objek JavaScript yang menentukan warna yang akan digunakan untuk berbagai bagian blok kode. Berikut adalah contoh tampilan objek tema khusus:

const myCustomTheme = {
 garisNomorWarna: "#ccc",
 barisNumberBgWarna: "#222",
 warna latar belakang: "#222",
 warna teks: "#ccc",
 substringWarna: "#00ff00",
 kata kunciWarna: "#0077ff",
 atributWarna: "#ffaa00",
 pemilihTagWarna: "#0077ff",
 docTagWarna: "#aa00ff",
 namaWarna: "#f8f8f8",
 Warna bawaan: "#0077ff",
 warna literal: "#ffaa00",
 Warna peluru: "#ffaa00",
 Kode Warna: "#ccc",
 warna tambahan: "#00ff00",
 regexpWarna: "#f8f8f8",
 simbolWarna: "#ffaa00",
 warna variabel: "#ffaa00",
 templateVariabelWarna: "#ffaa00",
 warna tautan: "#aa00ff",
 SelectorAttributeColor: "#ffaa00",
 pemilihPseudoColor: "#aa00ff",
 jenisWarna: "#0077ff",
 stringWarna: "#00ff00",
 pemilihIdWarna: "#ffaa00",
 kutipanWarna: "#f8f8f8",
 TemplatTagWarna: "#ccc",
 warna penghapusan: "#ff0000",
 warna judul: "#0077ff",
 bagianWarna: "#0077ff",
 komentarWarna: "#777",
 metaKata KunciWarna: "#f8f8f8",
 warna meta: "#aa00ff",
 fungsiWarna: "#0077ff",
 nomorWarna: "#ffaa00",
};

Untuk menggunakan tema khusus, Anda harus meneruskan objek tema sebagai prop tema dari komponen CodeBlock:

 teks='console.log("Halo, dunia!");'
 bahasa='javascript'
 showLineNumber={BENAR}
 tema={TemaKustomsaya}
/>

Di bawah ini adalah outputnya:

Dengan menggunakan tema bawaan dan khusus, Anda dapat menyesuaikan tampilan blok kode agar sesuai dengan kebutuhan dan keseluruhan desain aplikasi Anda.

Menambahkan CopyBlock ke Proyek Anda

Jika Anda ingin menambahkan fungsi penyalinan ke blok kode Anda, Anda dapat menggunakan CopyBlock komponen yang disediakan oleh pustaka react-code-blocks. Untuk menggunakan komponen ini, Anda harus menginstal reaksi-salin-ke-papan klip perpustakaan juga. Berikut cara menambahkan komponen CopyBlock ke proyek Anda:

Instal reaksi-salin-ke-papan klip perpustakaan:

npm install react-copy-to-clipboard

Impor komponen dan pustaka yang diperlukan:

impor { Salin Blok } dari'reaksi-kode-blok';
impor { FaCopy } dari'reaksi-ikon/fa';
impor menyalin dari'menyalin ke clipboard';

Gunakan komponen CopyBlock dalam kode Anda:

const kode = 'console.log("Halo, dunia!");';
const bahasa = 'javascript';
 teks={kode}
 bahasa={bahasa}
 showLineNumber={BENAR}
 wrapLines={BENAR}
 tema='Drakula'
 codeBlock
 ikon={}
 onCopy={() => salin (kode)}
/>

Di bawah ini adalah outputnya:

Dengan menambahkan komponen CopyBlock ke proyek Anda, Anda dapat dengan mudah mengizinkan pengguna untuk menyalin kode dari blok kode Anda ke clipboard mereka.

Metode Alternatif untuk Menambahkan Blok Kode

Saat menggunakan pustaka react-code-blocks adalah cara paling mudah untuk menambahkan blok kode ke aplikasi React Anda, ada juga beberapa metode alternatif yang dapat Anda gunakan:

1. Menambahkan penyorotan sintaks secara manual: Jika Anda tidak ingin menggunakan perpustakaan, Anda dapat secara manual menambahkan penyorotan sintaks ke kode Anda menggunakan Tailwind CSS atau CSS biasa. Ini melibatkan penambahan kelas CSS ke elemen kode Anda untuk menerapkan gaya yang sesuai. Meskipun metode ini memberi Anda lebih banyak kontrol atas gaya, penyiapan dan pemeliharaannya dapat memakan waktu.
2. Menggunakan library lain: Ada beberapa pustaka lain yang tersedia yang menyediakan penyorotan sintaks untuk kode, seperti reaksi-sintaks-highlighter, penyaji reaksi prisma, Dan sorot.js. Pustaka ini memiliki fitur dan gaya yang berbeda, sehingga Anda dapat memilih salah satu yang sesuai dengan kebutuhan Anda.

Meskipun library react-code-blocks merupakan pilihan tepat untuk sebagian besar aplikasi, metode alternatif ini dapat berguna dalam situasi tertentu. Pada akhirnya, metode yang Anda pilih akan bergantung pada kebutuhan dan preferensi spesifik Anda.

Tingkatkan Keterlibatan Pengguna Dengan Blok Kode

Dengan menggunakan blok kode untuk menjelaskan kode, memberikan contoh pengkodean interaktif, dan membuat secara visual desain yang menarik, Anda dapat meningkatkan pengalaman pengguna dan membuat mereka tetap terlibat dengan situs web Anda atau aplikasi. Selain itu, dengan menggunakan fitur seperti CopyBlock dan tema khusus, Anda dapat menjadikan aplikasi React Anda lebih fungsional dan menarik.