Viena no programmēšanas emuāra galvenajām iezīmēm ir kodu bloki. Jums tie nav jāformatē, izmantojot sintakses marķieri, taču, ja to darāt, jūsu emuāri izskatās daudz skaistāki. Tas var arī uzlabot jūsu koda lasāmību.

Šajā rakstā tiks parādīts, kā izmantot react-syntax-highlighter, lai izceltu koda blokus programmā React. Jūs izveidosit koda bloka komponentu, kas spēj izcelt tam nodoto kodu, izmantojot norādītās valodas sintaksi.

Sintakses izcelšana Ar reakcijas sintakses izcēlēju

React sintakses marķieris ļauj izcelt kodu, izmantojot React. Atšķirībā no citiem sintakses marķieri, react-syntax-highlighter nepaļaujas uz ComponentDidUpdate vai ComponentDidMount, lai ievietotu izcelto kodu DOM, izmantojot bīstamas SetInnerHTML.

Šāda pieeja ir bīstama, jo tā pakļauj lietojumprogrammu starpvietņu skriptu uzbrukumi.

Tā vietā tā izmanto sintakses koku, lai izveidotu virtuālo DOM, un atjaunina to tikai ar izmaiņām.

Komponents fonā izmanto PrismJS un Highlight.js. Varat izvēlēties vienu vai otru, lai izceltu savu kodu. To ir ļoti viegli lietot, jo tas nodrošina gatavu stilu.

instagram viewer

React-sintakses izcelšanas komponents pieņem kodu, valodu un stilu kā rekvizītus. Komponents pieņem arī citas pielāgošanas iespējas. Jūs varat tos atrast sadaļā reaģēt sintakses marķiera dokumentācija.

Izmantojot react-syntax-highlighter komponentu

Lai programmā React sāktu izmantot react sintakses marķieri, instalējiet to, izmantojot npm.

npm uzstādīt reaģēt-sintakse-izcēlējs -- saglabāt

Izveidojiet jaunu komponentu ar nosaukumu CodeBlock.js savā React pieteikumā un importēt reaģēt-sintakse-izcēlējs:

imports Sintakses izgaismotājs no 'react-syntax-highlighter';
imports {docco} no 'react-syntax-highlighter/dist/esm/styles/hljs';
konst CodeBlock = ({koda virkne}) => {
atgriezties (
<SyntaxHighlighter valoda="javascript" style={docco}>
 {codeString}
</SyntaxHighlighter>
 );
};

Komponents SyntaxHighlighter pieņem lietojamo valodu un stilu. Tā saturs ir arī koda virkne.

Iepriekš minēto komponentu var atveidot šādi:

konst Lietotne = () => {
konst codeString = `
konst Kvadrāts = (n) => atgriezties n * n
 `
atgriezties(
<CodeBlock codestring={codeString}/>
 )
}

Ir svarīgi ņemt vērā, ka, izmantojot react-syntax-highlighter, var palielināt būvējuma izmēru, tādēļ, ja nepieciešams, varat importēt vieglo būvējumu. Tomēr vieglajai konstrukcijai nav noklusējuma stilu.

Jums būs arī jāimportē un jāreģistrē vajadzīgās valodas, izmantojot reģistrsValoda funkcija eksportēta no vieglās versijas.

imports { Gaisma kā Sintakses izgaismotājs} no 'react-syntax-highlighter';
imports js no 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
SyntaxHighlighter.registerLanguage('javascript', js);

Šis komponents izmanto Highlight.js, lai izceltu kodu.

Lai tā vietā izmantotu PrismJS, importējiet to no react-syntax-highlighter pakotnes šādi:

imports { Prizma kā Sintakses izgaismotājs} no "reaģēt-sintakse-izcelt";
imports { vscDarkPlus } no "react-syntax-highlighter/dist/esm/styles/prism";

Prism Light uzbūvei importējiet PrismLight un reģistrējiet izmantoto valodu.

imports { PrismLight kā Sintakses izgaismotājs} no 'react-syntax-highlighter';
imports jsx no 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
imports prizma no 'react-syntax-highlighter/dist/esm/styles/prism/prism';
SyntaxHighlighter.registerLanguage('jsx', jsx);

Prismas izmantošana ir izdevīga, it īpaši, izceļot jsx, jo react-syntax-highlighter to pilnībā neatbalsta.

Rindu numuru pievienošana kodu blokam

Tagad, kad zināt, kā izcelt koda bloku, varat sākt pievienot papildu funkcijas, piemēram, rindu numurus.

Izmantojot reaģēšanas sintakses izcelšanas rīku, jums tikai jānokārto showLineNumbers uz komponentu SyntaxHighlighter un iestatiet to uz True.

<SyntaxHighlighter valoda="javascript" style={docco} showLineNumbers="taisnība">
 {codeString}
</SyntaxHighlighter>

Komponents tagad parādīs rindu numurus blakus jūsu kodam.

Pielāgotu stilu izmantošana savā komponentā

Lai gan reaģēšanas sintakses izcelšana nodrošina stilu, dažkārt jums var būt jāpielāgo koda bloki.

Šim nolūkam pakotne ļauj iziet rindā CSS stili uz customStyle rekvizītu, kā parādīts zemāk:

<SyntaxHighlighter valoda="javascript" style={vscDarkPlus} customStyle={{borderRadius: "5 pikseļi", fona krāsa: "#001E3C"}} >
 {codestring}
</SyntaxHighlighter>

Šajā piemērā iezīmētajam koda blokam būs pielāgots apmales rādiuss un fona krāsa.

Sintakses izcelšanas nozīme

Varat izmantot pakotni react-syntax-highlighter, lai izceltu kodu programmā React. Varat izmantot vieglo versiju, lai samazinātu būvējuma izmēru un pielāgotu koda blokus, izmantojot savus stilus.

Izceļot koda fragmentus, kods izskatās labi, uzlabo tā lasāmību un padara to pieejamāku lasītājiem.