Kuidas lisada oma Reacti rakenduses koodiplokke

Veebiarenduses on levinud nõue koodiplokkide kuvamine õige vormingu ja esiletõstmisega. Koodiplokid on mitmekülgne tööriist, mida saab kasutada erinevatel eesmärkidel, sealhulgas koodi kuvamiseks ja kasutaja seotuse parandamiseks.

Raamatukogu installimine

Esiteks looge rakendus React ja installige reageerida-kood-plokid raamatukogu. Seda teeki kasutatakse teie rakenduses koodiplokkide kuvamiseks. Selle teegi saate installida Node.js paketihalduri npm abil. Avage oma terminal ja liikuge oma projektikataloogi. Seejärel käivitage järgmine käsk:

npm installige reageerimiskoodi plokid

See installib teie projekti reageerimiskoodiplokkide teegi.

Koodiploki lisamine oma projektile

Kui olete react-code-blocks teegi installinud, olete alustamiseks valmis. Esiteks importige CodeBlock komponent teie rakenduse reageerimiskoodide blokeerimise teegist. Seda saate teha, lisades oma failile järgmise koodi:

importida { CodeBlock } alates"reageerimiskoodiplokid";

Seejärel kasutage oma rakenduses CodeBlocki komponenti, lisades järgmise koodi:

 tekst='console.log("Tere, maailm!");'
 keel='javascript'
 showLineNumbers={tõsi}
 teema={teie teema}
/>

Ülaltoodud koodis edastate CodeBlocki komponendile mitmeid rekvisiite. Siin on nimekiri kõigist saadaolevatest rekvisiitidest:

• tekst (nõutav): koodiplokis kuvatav kood.
• keel (nõutav): koodi programmeerimiskeel. Seda kasutatakse selleks koodiploki süntaksi esiletõstmine.
• showLineNumbers: Boolean väärtus, mis näitab, kas kuvada koodiplokis reanumbreid või mitte. Vaikimisi on see vale.
• teema: Koodiploki jaoks kasutatav teema. See võib olla sisseehitatud teema või kohandatud teemaobjekt. Vaikimisi on see GitHub.
• algusReaNumber: rea number, millest loendamist alustada. Vaikimisi on see 1.
• koodiplokk: objekt, mis sisaldab koodiploki valikuid. See võib hõlmata ridaNumbrid (tõve väärtus, mis näitab, kas kuvada reanumbreid või mitte) ja wrapLines (tõve väärtus, mis näitab, kas ridu murda või mitte).
• onClick: funktsioon, mida kutsuda koodiplokil klõpsamisel.

Siin on näide kõigi nende rekvisiitide kasutamise kohta.

importida { CodeBlock } alates"reageerimiskoodiplokid";
funktsiooniMinu komponent() {
konst käepideClick = () => {
konsool.log("Koodiplokk klõpsatud");
 };
tagasi (
 tekst='const greeting = "Tere, maailm!"; console.log (tervitus);'
 keel='javascript'
 showLineNumbers={tõsi}
 teema ="aatom-üks-tume"
 startLineNumber={10}
 codeBlock={{ ridaNumbrid: vale, wrapLines: tõsi }}
 onClick={handleClick}
 />
 );
}

Ülaltoodud koodis kasutate aatom-üks-tume teema, reanumbrite alustamine 10-st, reanumbrite keelamine, ridade murdmise lubamine ja klõpsukäsitleja lisamine.

Neid rekvisiite kasutades saate kohandada oma koodiplokkide välimust ja käitumist vastavalt oma vajadustele.

Teemade lisamine oma koodiplokkidesse

Reageerimiskoodiplokkide teek pakub mitmesuguseid sisseehitatud teemasid, mida saab kasutada koodiplokkide välimuse kohandamiseks. Sisseehitatud teema kasutamiseks peate lihtsalt määrama teema nime teema prop. Näiteks selleks, et kasutada aatom-üks-tume teema, kasutaksite järgmist koodi:

 tekst='console.log("Tere, maailm!");'
 keel='javascript'
 showLineNumbers={tõsi}
 teema ="aatom-üks-tume"
/>

Lisaks sisseehitatud teemadele saate luua ka kohandatud teemasid, määratledes JavaScripti objekti, mis määrab koodiploki erinevate osade jaoks kasutatavad värvid. Siin on näide sellest, kuidas kohandatud teemaobjekt välja näeb.

konst myCustomTheme = {
 lineNumberColor: "#ccc",
 lineNumberBgColor: "#222",
 taustavärv: "#222",
 tekstivärv: "#ccc",
 alamstringi värv: "#00ff00",
 märksõnavärv: "#0077ff",
 atribuutColor: "#ffaa00",
 SelectorTagColor: "#0077ff",
 docTagColor: "#aa00ff",
 nimiVärv: "#f8f8f8",
 builtInColor: "#0077ff",
 sõnasõnaline värv: "#ffaa00",
 bulletColor: "#ffaa00",
 koodivärv: "#ccc",
 lisavärv: "#00ff00",
 regexpColor: "#f8f8f8",
 sümboli värv: "#ffaa00",
 variableColor: "#ffaa00",
 templateVariableColor: "#ffaa00",
 lingi värv: "#aa00ff",
 SelectorAttributeColor: "#ffaa00",
 valija Pseudovärv: "#aa00ff",
 tüüpVärv: "#0077ff",
 stringColor: "#00ff00",
 SelectorIdColor: "#ffaa00",
 quoteColor: "#f8f8f8",
 templateTagColor: "#ccc",
 kustutamise värv: "#ff0000",
 title Color: "#0077ff",
 jaotis Värv: "#0077ff",
 kommentaar Värv: "#777",
 metaKeywordColor: "#f8f8f8",
 metaColor: "#aa00ff",
 FunktsioonVärv: "#0077ff",
 numberColor: "#ffaa00",
};

Kohandatud teema kasutamiseks edastage teemaobjekt CodeBlocki komponendi teemarekvisiidina:

 tekst='console.log("Tere, maailm!");'
 keel='javascript'
 showLineNumbers={tõsi}
 theme={myCustomTheme}
/>

Allpool on väljund:

Sisseehitatud ja kohandatud teemade abil saate kohandada koodiplokkide välimust vastavalt teie vajadustele ja rakenduse üldisele kujundusele.

CopyBlocki lisamine oma projektile

Kui soovite oma koodiplokkidele lisada kopeerimisfunktsiooni, saate kasutada CopyBlock React-code-blocki teegi pakutav komponent. Selle komponendi kasutamiseks peate installima reageeri-kopeeri-lõikepuhvrisse raamatukogu samuti. CopyBlocki komponendi lisamiseks oma projekti tehke järgmist.

Installige reageeri-kopeeri-lõikepuhvrisse raamatukogu:

npm installida reageerida-kopeerida lõikelauale

Importige vajalikud komponendid ja teegid:

importida { CopyBlock } alates'reageerimiskoodiplokid';
importida { FaCopy } alates'react-icons/fa';
importida kopeerida alates'kopeerida lõikelauale';

Kasutage oma koodis CopyBlocki komponenti:

konst kood = 'console.log("Tere, maailm!");';
konst keel = 'javascript';
 tekst={kood}
 keel={keel}
 showLineNumbers={tõsi}
 wrapLines={tõsi}
 teema ='dracula'
 koodiplokk
 icon={}
 onCopy={() => kopeeri (kood)}
/>

Allpool on väljund:

Kui lisate oma projektile komponendi CopyBlock, saate hõlpsalt lubada kasutajatel koodi teie koodiplokkidest lõikepuhvrisse kopeerida.

Alternatiivsed meetodid koodiplokkide lisamiseks

Kuigi react-code-blocks teegi kasutamine on kõige lihtsam viis oma Reacti rakendusse koodiplokkide lisamiseks, saate kasutada ka mõnda alternatiivset meetodit.

1. Süntaksi esiletõstmise käsitsi lisamine: kui te ei soovi teeki kasutada, saate oma koodile käsitsi süntaksi esiletõstmise lisada kasutades Tailwind CSS-i või tavaline CSS. See hõlmab sobivate stiilide rakendamiseks oma koodielementidele CSS-klasside lisamist. Kuigi see meetod annab teile stiilide üle suurema kontrolli, võib selle seadistamine ja hooldamine olla aeganõudev.
2. Teiste raamatukogude kasutamine: Saadaval on mitu muud teeki, mis pakuvad koodi süntaksi esiletõstmist, näiteks React-syntax-highlighter, prisma reageerimise renderdaja, ja highlight.js. Nendel teegidel on erinevad funktsioonid ja stiilid, nii et saate valida oma vajadustele vastava.

Kuigi reageerimiskoodiplokkide teek on enamiku rakenduste jaoks suurepärane valik, võivad need alternatiivsed meetodid olla teatud olukordades kasulikud. Lõppkokkuvõttes sõltub teie valitud meetod teie konkreetsetest vajadustest ja eelistustest.

Parandage kasutajate seotust koodiplokkidega

Kasutades koodiplokke koodi selgitamiseks, interaktiivsete kodeerimisnäidete pakkumiseks ja visuaalseks loomiseks ahvatlevate kujundustega saate täiustada oma kasutajakogemust ja hoida neid teie veebisaidil või rakendus. Lisaks saate selliste funktsioonide nagu CopyBlock ja kohandatud teemade abil muuta oma Reacti rakenduse veelgi funktsionaalsemaks ja atraktiivsemaks.