Cara Menambahkan Penyorotan Sintaks ke Blok Kode di React

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 penyorot sintaks lainnya, 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 dokumentasi penyorot sintaks reaksi.

Menggunakan Komponen react-syntax-highlighter

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

npm install react-syntax-highlighter 

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

import SyntaxHighlighter from 'react-syntax-highlighter';
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';

const CodeBlock = ({codestring}) => {
return (
<SyntaxHighlighter language="javascript" style={docco}>
{codeString}
</SyntaxHighlighter>
);
};

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

See also  Cara Mengambil Data Dari Instagram Menggunakan Python

Anda dapat merender komponen di atas sebagai berikut:

const App = () => {
const codeString = `
const Square = (n) => return n * n
`
return(
<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.

import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
import js from '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:

import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";

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

import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
import prism from 'react-syntax-highlighter/dist/esm/styles/prism/prism';

SyntaxHighlighter.registerLanguage('jsx', jsx);

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.

<SyntaxHighlighter language="javascript" style={docco} showLineNumbers="true">
{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 ini memungkinkan Anda untuk meneruskan gaya CSS sebaris ke prop customStyle seperti yang ditunjukkan di bawah ini:

See also  Mengkonsumsi RESTful API dengan Go

<SyntaxHighlighter language="javascript" style={vscDarkPlus} customStyle={{borderRadius: "5px", backgroundColor: "#001E3C"}} >
{codestring}
</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.