Salah satu fitur utama dari blog pemrograman adalah blok kode. Anda tidak perlu memformatnya menggunakan penyorot sintaks, tetapi itu membuat blog Anda terlihat jauh lebih bagus jika Anda melakukannya. Itu juga dapat meningkatkan keterbacaan kode Anda.

Artikel ini akan menunjukkan kepada Anda bagaimana menggunakan react-syntax-highlighter untuk menyorot blok kode di React. Anda akan membuat komponen blok kode yang mampu menyorot kode yang diteruskan ke sana menggunakan sintaks bahasa yang disediakan.

Penyorotan Sintaks Dengan react-syntax-highlighter

Penyorot sintaks reaksi memungkinkan Anda untuk menyorot kode menggunakan React. Tidak seperti yang lain penyorot sintaks, react-syntax-highlighter tidak bergantung pada ComponentDidUpdate atau ComponentDidMount untuk menyisipkan kode yang disorot di DOM menggunakan hazardlySetInnerHTML.

Pendekatan itu berbahaya karena memaparkan aplikasi ke serangan skrip lintas situs.

Sebagai gantinya, ia menggunakan pohon sintaks untuk membangun DOM virtual dan memperbaruinya hanya dengan perubahan.

Komponen menggunakan PrismJS dan Highlight.js di latar belakang. Anda dapat memilih untuk menggunakan salah satu untuk menyorot kode Anda. Sangat mudah digunakan karena memberikan gaya out-of-the-box.

Komponen react-syntax-highlighter menerima kode, bahasa, dan gaya sebagai props. Komponen menerima opsi penyesuaian lainnya juga. Anda dapat menemukannya di bereaksi dokumentasi penyorot sintaks.

Menggunakan Komponen react-syntax-highlighter

Untuk mulai menggunakan penyorot sintaks reaksi di React, instal melalui npm.

npm Install reaksi-sintaks-highlighter --menyimpan

Buat komponen baru yang disebut CodeBlock.js di Aplikasi Bereaksi Anda dan impor reaksi-sintaks-highlighter:

impor Penyorot Sintaks dari 'react-syntax-highlighter';
impor { dok } dari 'react-syntax-highlighter/dist/esm/styles/hljs';
konstan CodeBlock = ({codestring}) => {
kembali (
<Bahasa SyntaxHighlighter="javascript" gaya={dok}>
 {codeString}
</SyntaxHighlighter>
 );
};

Komponen SyntaxHighlighter menerima bahasa dan gaya yang akan digunakan. Itu juga mengambil string kode sebagai isinya.

Anda dapat merender komponen di atas sebagai berikut:

konstan Aplikasi = () => {
konstan kodeString = `
konstan Persegi = (n) => kembali n * n
 `
kembali(
<CodeBlock codestring={codeString}/>
 )
}

Penting untuk dicatat bahwa menggunakan react-syntax-highlighter dapat meningkatkan ukuran build Anda, jadi jika perlu, Anda dapat mengimpor build ringan. Namun, build ringan tidak memiliki gaya default.

Anda juga perlu mengimpor dan mendaftarkan bahasa yang Anda inginkan menggunakan daftarBahasa fungsi yang diekspor dari build ringan.

impor { Lampu sebagai Penyorot Sintaks } dari 'react-syntax-highlighter';
impor js dari 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
SyntaxHighlighter.registerLanguage('javascript', js);

Komponen ini menggunakan Highlight.js untuk menyorot kode.

Untuk menggunakan PrismJS sebagai gantinya, impor dari paket react-syntax-highlighter seperti ini:

impor { Prisma sebagai Penyorot Sintaks } dari "react-syntax-highlighter";
impor { vscDarkPlus } dari "react-syntax-highlighter/dist/esm/styles/prisma";

Untuk pembuatan lampu prisma, impor PrismLight dan daftarkan bahasa yang Anda gunakan.

impor { Cahaya Prisma sebagai Penyorot Sintaks } dari 'react-syntax-highlighter';
impor jsx dari 'react-syntax-highlighter/dist/esm/languages/prisma/jsx';
impor prisma dari 'react-syntax-highlighter/dist/esm/styles/prisma/prisma';
SyntaxHighlighter.registerLanguage('jsx', jx);

Menggunakan prisma bermanfaat, terutama saat menyorot jsx karena react-syntax-highlighter tidak sepenuhnya mendukungnya.

Menambahkan Nomor Baris ke Blok Kode

Sekarang setelah Anda mengetahui cara menyorot blok kode, Anda dapat mulai menambahkan fitur tambahan seperti nomor baris.

Dengan react-syntax-highlighter, Anda hanya perlu melewati tampilkanNumberBaris ke komponen SyntaxHighlighter dan setel ke true.

<Bahasa SyntaxHighlighter="javascript" style={docco} showLineNumbers="BENAR">
 {codeString}
</SyntaxHighlighter>

Komponen sekarang akan menampilkan nomor baris di sebelah kode Anda.

Menggunakan Gaya Kustom di Komponen Anda

Meskipun react-syntax-highlighter menyediakan gaya, Anda mungkin perlu menyesuaikan blok kode Anda kadang-kadang.

Untuk ini, paket memungkinkan Anda untuk lulus inline gaya CSS ke prop customStyle seperti yang ditunjukkan di bawah ini:

<Bahasa SyntaxHighlighter="javascript" style={vscDarkPlus} customStyle={{borderRadius: "5px", warna latar belakang: "#001E3C"}} >
 {string kode}
</SyntaxHighlighter>

Blok kode yang disorot akan memiliki radius batas kustom dan warna latar belakang dalam contoh ini.

Pentingnya Penyorotan Sintaks

Anda dapat menggunakan paket react-syntax-highlighter untuk menyorot kode di React. Anda dapat menggunakan versi ringan untuk mengurangi ukuran build dan menyesuaikan blok kode menggunakan gaya Anda sendiri.

Menyoroti cuplikan kode membuat kode Anda terlihat bagus, meningkatkan keterbacaannya, dan membuatnya lebih mudah didekati oleh pembaca.