Kaip pridėti kodų blokus savo „React“ programoje

Kuriant žiniatinklio, kodo blokų rodymas su tinkamu formatavimu ir paryškinimu yra įprastas reikalavimas. Kodo blokai yra universalus įrankis, kurį galima naudoti įvairiems tikslams, įskaitant kodo rodymą ir vartotojų įtraukimo gerinimą.

Bibliotekos įdiegimas

Pirmas, sukurti programą „React“. ir įdiekite reaguoti-kodas-blokai biblioteka. Ši biblioteka naudojama kodo blokams rodyti programoje. Šią biblioteką galite įdiegti naudodami npm, paketų tvarkyklę, skirtą Node.js. Atidarykite terminalą ir eikite į savo projekto katalogą. Tada paleiskite šią komandą:

npm įdiegti react-code-blocks

Taip jūsų projekte bus įdiegta react-code-blocks biblioteka.

Kodo bloko pridėjimas prie projekto

Įdiegę react-code-blocks biblioteką, būsite pasiruošę pradėti. Pirma, importuokite CodeBlock komponentas iš jūsų programoje esančios reakcijos kodo blokavimo bibliotekos. Tai galite padaryti prie failo pridėję šį kodą:

importuoti { CodeBlock } iš"reaguoti kodo blokai";

Tada naudokite „CodeBlock“ komponentą programoje pridėdami šį kodą:

 tekstas ='console.log("Sveikas, pasauli!");'
 kalba ='javascript'
 showLineNumbers={tiesa}
 tema={jūsų tema}
/>

Aukščiau pateiktame kode jūs perduodate keletą rekvizitų „CodeBlock“ komponentui. Čia yra visų galimų rekvizitų sąrašas:

• tekstas (būtina): kodas, kuris turi būti rodomas kodų bloke.
• kalba (būtina): kodo programavimo kalba. Tai naudojama kodo bloko sintaksės paryškinimas.
• showLineNumbers: Būlio reikšmė, nurodanti, ar kodo bloke rodyti eilučių numerius, ar ne. Pagal numatytuosius nustatymus jis yra klaidingas.
• tema: Kodo blokui naudojama tema. Tai gali būti įmontuota tema arba tinkintos temos objektas. Numatytasis yra GitHub.
• pradžios eilutės numeris: eilutės numeris, nuo kurio pradedama skaičiuoti. Numatytasis yra 1.
• kodų blokas: objektas, kuriame yra kodo bloko parinktys. Tai gali apimti eilutėSkaičiai (loginis simbolis, nurodantis, ar rodyti eilučių numerius, ar ne) ir wrapLines (loginis simbolis, nurodantis, ar apvynioti eilutes, ar ne).
• paspaudus: funkcija, kurią reikia iškviesti spustelėjus kodo bloką.

Štai pavyzdys, kaip naudoti visus šiuos rekvizitus:

importuoti { CodeBlock } iš"reaguoti kodo blokai";
funkcijaMano komponentas() {
konst rankenaSpustelėkite = () => {
konsolė.log(„Kodo blokas paspaustas“);
 };
grąžinti (
 tekstas ='const greeting = "Sveikas, pasauli!"; console.log (pasveikinimas);'
 kalba ='javascript'
 showLineNumbers={tiesa}
 tema =„atomas-vienas tamsus“
 startLineNumber={10}
 codeBlock={{ eilutėSkaičiai: klaidinga, wrapLines: tiesa }}
 onClick={handleClick}
 />
 );
}

Aukščiau pateiktame kode jūs naudojate atomas-vienas-tamsus temą, eilučių numerius pradedant nuo 10, išjungti eilučių numerius, įjungti eilučių apvyniojimą ir pridėti paspaudimų tvarkyklę.

Naudodami šiuos rekvizitus galite tinkinti savo kodo blokų išvaizdą ir veikimą, kad atitiktų jūsų poreikius.

Temų pridėjimas prie kodo blokų

Reagavimo kodo blokų bibliotekoje yra įvairių integruotų temų, kurias galima naudoti norint pritaikyti kodo blokų išvaizdą. Norėdami naudoti integruotą temą, tiesiog turite nurodyti temos pavadinimą tema prop. Pavyzdžiui, norint naudoti atomas-vienas-tamsus tema, turėtumėte naudoti šį kodą:

 tekstas ='console.log("Sveikas, pasauli!");'
 kalba ='javascript'
 showLineNumbers={tiesa}
 tema =„atomas-vienas tamsus“
/>

Be integruotų temų, taip pat galite kurti pasirinktines temas, apibrėždami „JavaScript“ objektą, kuris nurodo spalvas, naudojamas skirtingoms kodo bloko dalims. Štai pavyzdys, kaip gali atrodyti tinkintos temos objektas:

konst myCustomTheme = {
 lineNumberColor: "#ccc",
 lineNumberBgColor: "#222",
 fono spalva: "#222",
 teksto spalva: "#ccc",
 poeilutės spalva: "#00ff00",
 raktažodžio spalva: "#0077ff",
 atributo spalva: "#ffaa00",
 SelectorTagColor: "#0077ff",
 docTagColor: "#aa00ff",
 pavadinimas Spalva: "# f8f8f8",
 builtInColor: "#0077ff",
 literalColor: "#ffaa00",
 bulletColor: "#ffaa00",
 kodo spalva: "#ccc",
 papildymo spalva: "#00ff00",
 regexpColor: "# f8f8f8",
 simbolio spalva: "#ffaa00",
 kintama spalva: "#ffaa00",
 šablonasVariableColor: "#ffaa00",
 nuorodos spalva: "#aa00ff",
 SelectorAttributeColor: "#ffaa00",
 parinkiklis Pseudospalva: "#aa00ff",
 tipasSpalva: "#0077ff",
 stygos spalva: "#00ff00",
 SelectorIdColor: "#ffaa00",
 citataSpalva: "# f8f8f8",
 templateTagColor: "#ccc",
 trynimo spalva: "#ff0000",
 pavadinimas Spalva: "#0077ff",
 Skyriaus Spalva: "#0077ff",
 komentaras Spalva: "#777",
 metaKeywordColor: "# f8f8f8",
 metaColor: "#aa00ff",
 funkcija Spalva: "#0077ff",
 numeris Spalva: "#ffaa00",
};

Norėdami naudoti pasirinktinę temą, temos objektą perduokite kaip CodeBlock komponento temos rekvizitus:

 tekstas ='console.log("Sveikas, pasauli!");'
 kalba ='javascript'
 showLineNumbers={tiesa}
 theme={myCustomTheme}
/>

Žemiau yra išvestis:

Naudodami integruotas ir pasirinktines temas galite tinkinti kodo blokų išvaizdą, kad jie atitiktų jūsų poreikius ir bendrą programos dizainą.

„CopyBlock“ pridėjimas prie projekto

Jei norite pridėti kopijavimo funkciją prie kodų blokų, galite naudoti CopyBlock komponentas, pateiktas react-code-blocks bibliotekos. Norėdami naudoti šį komponentą, turėsite įdiegti reaguoti-kopijuoti-į iškarpinę biblioteka taip pat. Štai kaip prie projekto pridėti „CopyBlock“ komponentą:

Įdiekite reaguoti-kopijuoti-į iškarpinę biblioteka:

npm įdiegti react-copy-to-mainingboard

Importuokite reikiamus komponentus ir bibliotekas:

importuoti { CopyBlock } iš„reagavimo kodo blokai“;
importuoti { FaCopy } iš'react-icons/fa';
importuoti kopija iš'nukopijuoti į iškarpinę';

Kode naudokite „CopyBlock“ komponentą:

konst kodas = 'console.log("Sveikas, pasauli!");';
konst kalba = 'javascript';
 tekstas={kodas}
 kalba={kalba}
 showLineNumbers={tiesa}
 wrapLines={tiesa}
 tema ="Drakula"
 kodų blokas
 icon={}
 onCopy={() => kopijuoti (kodas)}
/>

Žemiau yra išvestis:

Pridėję CopyBlock komponentą prie savo projekto, galite lengvai leisti vartotojams kopijuoti kodą iš jūsų kodo blokų į mainų sritį.

Alternatyvūs kodo blokų pridėjimo būdai

Nors react-code-blocks bibliotekos naudojimas yra paprasčiausias būdas pridėti kodo blokus į savo React programą, taip pat yra keletas alternatyvių metodų, kuriuos galite naudoti:

1. Neautomatinis sintaksės paryškinimo pridėjimas: jei nenorite naudoti bibliotekos, galite rankiniu būdu pridėti sintaksės paryškinimą prie kodo naudojant Tailwind CSS arba įprastas CSS. Tai apima CSS klasių pridėjimą prie kodo elementų, kad būtų pritaikyti atitinkami stiliai. Nors šis metodas suteikia daugiau galimybių valdyti stilius, jį nustatyti ir prižiūrėti gali prireikti daug laiko.
2. Naudojant kitas bibliotekas: Yra keletas kitų bibliotekų, kurios suteikia kodo sintaksės paryškinimą, pvz., react-sintaksė-paryškintuvas, prizmė-reaguoti-perteikėjas, ir highlight.js. Šios bibliotekos turi skirtingas funkcijas ir stilius, todėl galite pasirinkti vieną, kuri atitinka jūsų poreikius.

Nors reagavimo kodo blokų biblioteka yra puikus pasirinkimas daugeliui programų, šie alternatyvūs metodai gali būti naudingi tam tikrose situacijose. Galiausiai pasirinktas metodas priklausys nuo jūsų konkrečių poreikių ir pageidavimų.

Pagerinkite vartotojų įsitraukimą naudodami kodų blokus

Naudojant kodo blokus kodui paaiškinti, interaktyviems kodavimo pavyzdžiams pateikti ir vizualiai kurti patrauklų dizainą, galite pagerinti savo naudotojų patirtį ir išlaikyti jų susidomėjimą jūsų svetaine arba taikymas. Be to, naudodami tokias funkcijas kaip „CopyBlock“ ir pasirinktines temas, galite padaryti „React“ programą dar funkcionalesnę ir patrauklesnę.