Cara Menambahkan Blok Kode di Aplikasi React

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, buat aplikasi React 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.

Baca Juga:

Mau Berkarir di Dunia blockchain? Ini Dia 10 Skill yang Harus Kamu Dalami!

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:

 import { CodeBlock } from "react-code-blocks"; 

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

 <CodeBlock
  text='console.log("Hello, world!");'
  language='javascript'
  showLineNumbers={true}
  theme={yourTheme}
/> 

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:

 import { CodeBlock } from "react-code-blocks";
function MyComponent() {
  const handleClick = () => {
    console.log("Code block clicked");
  };
  return (
    <CodeBlock
      text='const greeting = "Hello, world!"; console.log(greeting);'
      language='javascript'
      showLineNumbers={true}
      theme='atom-one-dark'
      startingLineNumber={10}
      codeBlock={{ lineNumbers: false, wrapLines: true }}
      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:

 <CodeBlock
  text='console.log("Hello, world!");'
  language='javascript'
  showLineNumbers={true}
  theme='atom-one-dark'
/> 

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 = {
  lineNumberColor: "#ccc",
  lineNumberBgColor: "#222",
  backgroundColor: "#222",
  textColor: "#ccc",
  substringColor: "#00ff00",
  keywordColor: "#0077ff",
  attributeColor: "#ffaa00",
  selectorTagColor: "#0077ff",
  docTagColor: "#aa00ff",
  nameColor: "#f8f8f8",
  builtInColor: "#0077ff",
  literalColor: "#ffaa00",
  bulletColor: "#ffaa00",
  codeColor: "#ccc",
  additionColor: "#00ff00",
  regexpColor: "#f8f8f8",
  symbolColor: "#ffaa00",
  variableColor: "#ffaa00",
  templateVariableColor: "#ffaa00",
  linkColor: "#aa00ff",
  selectorAttributeColor: "#ffaa00",
  selectorPseudoColor: "#aa00ff",
  typeColor: "#0077ff",
  stringColor: "#00ff00",
  selectorIdColor: "#ffaa00",
  quoteColor: "#f8f8f8",
  templateTagColor: "#ccc",
  deletionColor: "#ff0000",
  titleColor: "#0077ff",
  sectionColor: "#0077ff",
  commentColor: "#777",
  metaKeywordColor: "#f8f8f8",
  metaColor: "#aa00ff",
  functionColor: "#0077ff",
  numberColor: "#ffaa00",
}; 

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

 <CodeBlock
  text='console.log("Hello, world!");'
  language='javascript'
  showLineNumbers={true}
  theme={myCustomTheme}
/> 

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:

 import { CopyBlock } from 'react-code-blocks';
import { FaCopy } from 'react-icons/fa';
import copy from 'copy-to-clipboard'; 

Gunakan komponen CopyBlock dalam kode Anda:

 const code = 'console.log("Hello, world!");';
const language = 'javascript';
<CopyBlock
  text={code}
  language={language}
  showLineNumbers={true}
  wrapLines={true}
  theme='dracula'
  codeBlock
  icon={<FaCopy />}
  onCopy={() => copy(code)}
/> 

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 tidak ingin menggunakan library, Anda dapat menambahkan penyorotan sintaks ke kode secara manual menggunakan Tailwind CSS atau CSS normal. 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 prismaDan 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 desain yang menarik secara visual, Anda dapat meningkatkan pengalaman pengguna dan membuat mereka tetap terlibat dengan situs web atau aplikasi Anda. Selain itu, dengan menggunakan fitur seperti CopyBlock dan tema khusus, Anda dapat menjadikan aplikasi React Anda lebih fungsional dan menarik.