Kā pievienot kodu blokus savā React lietotnē

Tīmekļa izstrādē izplatīta prasība ir koda bloku parādīšana ar pareizu formatējumu un izcelšanu. Kodu bloki ir daudzpusīgs rīks, ko var izmantot dažādiem mērķiem, tostarp koda parādīšanai un lietotāju iesaistes uzlabošanai.

Bibliotēkas instalēšana

Pirmkārt, izveidot React lietotni un instalējiet reaģēt-koda bloki bibliotēka. Šī bibliotēka tiek izmantota, lai jūsu lietotnē parādītu koda blokus. Varat instalēt šo bibliotēku, izmantojot npm — Node.js pakotņu pārvaldnieku. Atveriet savu termināli un dodieties uz sava projekta direktoriju. Pēc tam palaidiet šādu komandu:

npm instalējiet reaģēšanas kodu blokus

Tādējādi jūsu projektā tiks instalēta reaģēšanas koda bloku bibliotēka.

Koda bloka pievienošana savam projektam

Kad esat instalējis reaģēšanas koda bloku bibliotēku, esat gatavs sākt. Pirmkārt, importējiet CodeBlock komponents no jūsu lietotnes reaģēšanas koda bloku bibliotēkas. To var izdarīt, failam pievienojot šādu kodu:

imports { CodeBlock } no"reaģēt-koda bloki";

Pēc tam savā lietotnē izmantojiet komponentu CodeBlock, pievienojot šādu kodu:

 teksts='console.log("Sveika, pasaule!");'
 valoda ='javascript'
 showLineNumbers={taisnība}
 tēma={jūsu tēma}
/>

Iepriekš minētajā kodā jūs nododat vairākus rekvizītus CodeBlock komponentam. Šeit ir visu pieejamo rekvizītu saraksts:

• teksts (obligāts): kods, kas jāparāda koda blokā.
• valoda (obligāti): koda programmēšanas valoda. Tas tiek izmantots koda bloka sintakses izcelšana.
• showLineNumbers: Būla vērtība, kas norāda, vai koda blokā rādīt rindu numurus vai nē. Pēc noklusējuma tas ir nepatiess.
• tēma: koda blokam izmantojamā tēma. Tas var būt iebūvēts motīvs vai pielāgots motīva objekts. Pēc noklusējuma tas ir GitHub.
• sākumaLineNumber: rindas numurs, no kura sākt skaitīšanu. Tā noklusējuma vērtība ir 1.
• koda bloks: objekts, kas satur koda bloka opcijas. Tas var ietvert rindaSkaitļi (būla vērtība, kas norāda, vai rādīt rindu numurus vai nē) un wrapLines (būla vērtība, kas norāda, vai aplauzt līnijas vai nē).
• onClick: funkcija, kas jāizsauc, kad tiek noklikšķināts uz koda bloka.

Tālāk ir sniegts visu šo palīgierīču izmantošanas piemērs.

imports { CodeBlock } no"reaģēt-koda bloki";
funkcijuMyComponent() {
konst rokturisNoklikšķiniet = () => {
konsole.log("Koda bloks ir noklikšķināts");
 };
atgriezties (
 teksts='const greeting = "Sveika, pasaule!"; console.log (sveiciens);'
 valoda ='javascript'
 showLineNumbers={taisnība}
 tēma ="atom-viens-tumšs"
 startLineNumber={10}
 codeBlock={{ rindaSkaitļi: viltus, wrapLines: taisnība }}
 onClick={handleClick}
 />
 );
}

Iepriekš minētajā kodā jūs izmantojat atoms-viens-tumšs tēmu, rindu numurus sākot ar 10, rindu numuru atspējošanu, rindu aplaušanas iespējošanu un klikšķu apdarinātāja pievienošanu.

Izmantojot šos rekvizītus, varat pielāgot koda bloku izskatu un darbību atbilstoši savām vajadzībām.

Motīvu pievienošana koda blokiem

React-code-blocks bibliotēka nodrošina dažādus iebūvētus motīvus, ko var izmantot, lai pielāgotu jūsu koda bloku izskatu. Lai izmantotu iebūvēto motīvu, jums vienkārši jānorāda motīva nosaukums tēma prop. Piemēram, lai izmantotu atoms-viens-tumšs tēmu, jūs izmantotu šādu kodu:

 teksts='console.log("Sveika, pasaule!");'
 valoda ='javascript'
 showLineNumbers={taisnība}
 tēma ="atom-viens-tumšs"
/>

Papildus iebūvētajiem motīviem varat izveidot arī pielāgotus motīvus, definējot JavaScript objektu, kas norāda krāsas, kas jāizmanto dažādām koda bloka daļām. Tālāk ir sniegts piemērs tam, kā varētu izskatīties pielāgota motīva objekts.

konst myCustomTheme = {
 lineNumberColor: "#ccc",
 lineNumberBgColor: "#222",
 fona krāsa: "#222",
 teksta krāsa: "#ccc",
 apakšvirknes krāsa: "#00ff00",
 atslēgvārda krāsa: "#0077ff",
 atribūtsColor: "#ffaa00",
 SelectorTagColor: "#0077ff",
 docTagColor: "#aa00ff",
 nosaukumsKrāsa: "#f8f8f8",
 builtInColor: "#0077ff",
 burtiskā krāsa: "#ffaa00",
 bulletColor: "#ffaa00",
 CodeColor: "#ccc",
 papildinājuma krāsa: "#00ff00",
 regexpColor: "#f8f8f8",
 simbola krāsa: "#ffaa00",
 mainīga krāsa: "#ffaa00",
 templateVariableColor: "#ffaa00",
 linkColor: "#aa00ff",
 SelectorAttributeColor: "#ffaa00",
 SelectorPseidokrāsa: "#aa00ff",
 tipsKrāsa: "#0077ff",
 stringColor: "#00ff00",
 SelectorIdColor: "#ffaa00",
 citāta krāsa: "#f8f8f8",
 templateTagColor: "#ccc",
 dzēšanas krāsa: "#ff0000",
 titleColor: "#0077ff",
 sadaļa Krāsa: "#0077ff",
 komentārs Krāsa: "#777",
 metaKeywordColor: "#f8f8f8",
 metaColor: "#aa00ff",
 funkcija Krāsa: "#0077ff",
 numursKrāsa: "#ffaa00",
};

Lai izmantotu pielāgotu motīvu, motīva objekts ir jānodod kā CodeBlock komponenta motīva rekvizīts:

 teksts='console.log("Sveika, pasaule!");'
 valoda ='javascript'
 showLineNumbers={taisnība}
 theme={myCustomTheme}
/>

Zemāk ir izvade:

Izmantojot iebūvētos un pielāgotos motīvus, varat pielāgot koda bloku izskatu atbilstoši savām vajadzībām un lietotnes vispārējam dizainam.

CopyBlock pievienošana jūsu projektam

Ja vēlaties saviem kodu blokiem pievienot kopēšanas funkcionalitāti, varat izmantot CopyBlock komponents, ko nodrošina reaģēšanas koda bloku bibliotēka. Lai izmantotu šo komponentu, jums būs jāinstalē reaģēt, kopēt starpliktuvē arī bibliotēka. Lūk, kā savam projektam pievienot CopyBlock komponentu:

Instalējiet reaģēt, kopēt starpliktuvē bibliotēka:

npm instalēt react-copy-to-starpliktuvē

Importējiet nepieciešamos komponentus un bibliotēkas:

imports { CopyBlock } no"reaģēt-koda bloki";
imports { FaCopy } no'react-icons/fa';
imports kopiju no'kopēt starpliktuvē';

Izmantojiet CopyBlock komponentu savā kodā:

konst kods = 'console.log("Sveika, pasaule!");';
konst valoda = 'javascript';
 teksts={kods}
 valoda={valoda}
 showLineNumbers={taisnība}
 wrapLines={taisnība}
 tēma ='drakula'
 koda bloks
 ikona={}
 onCopy={() => kopēt (kods)}
/>

Zemāk ir izvade:

Pievienojot savam projektam komponentu CopyBlock, varat viegli ļaut lietotājiem kopēt kodu no jūsu kodu blokiem savā starpliktuvē.

Alternatīvas koda bloku pievienošanas metodes

Lai gan reaģēšanas koda bloku bibliotēkas izmantošana ir visvienkāršākais veids, kā pievienot koda blokus savai React lietotnei, varat izmantot arī dažas alternatīvas metodes.

1. Manuāla sintakses izcelšanas pievienošana: ja nevēlaties izmantot bibliotēku, kodam varat manuāli pievienot sintakses izcelšanu izmantojot Tailwind CSS vai parastā CSS. Tas ietver CSS klašu pievienošanu koda elementiem, lai piemērotu atbilstošos stilus. Lai gan šī metode ļauj jums vairāk kontrolēt stilus, tās iestatīšana un uzturēšana var būt laikietilpīga.
2. Citu bibliotēku izmantošana: ir pieejamas vairākas citas bibliotēkas, kas nodrošina koda sintakses izcelšanu, piemēram, reaģēt-sintakse-izcēlējs, prizmas reaģēšanas renderētājs, un highlight.js. Šīm bibliotēkām ir dažādas funkcijas un stili, tāpēc varat izvēlēties savām vajadzībām atbilstošu.

Lai gan reaģēšanas koda bloku bibliotēka ir lieliska izvēle lielākajai daļai lietojumprogrammu, šīs alternatīvās metodes var būt noderīgas noteiktās situācijās. Galu galā izvēlētā metode būs atkarīga no jūsu īpašajām vajadzībām un vēlmēm.

Uzlabojiet lietotāju iesaisti, izmantojot kodu blokus

Izmantojot kodu blokus koda izskaidrošanai, interaktīvu kodēšanas piemēru nodrošināšanai un vizuālai veidošanai pievilcīgu dizainu, varat uzlabot savu lietotāju pieredzi un piesaistīt viņus jūsu vietnei vai pieteikumu. Turklāt, izmantojot tādas funkcijas kā CopyBlock un pielāgotus motīvus, varat padarīt savu React lietotni vēl funkcionālāku un pievilcīgāku.