Kako dodati blokove koda u svoju React aplikaciju

U web razvoju, prikazivanje blokova koda s pravilnim formatiranjem i isticanjem uobičajeni je zahtjev. Blokovi koda svestrani su alat koji se može koristiti u razne svrhe, uključujući prikazivanje koda i poboljšanje angažmana korisnika.

Instaliranje biblioteke

Prvi, izraditi React aplikaciju i instalirajte reagirati-kod-blokovi knjižnica. Ova se biblioteka koristi za prikaz blokova koda u vašoj aplikaciji. Ovu biblioteku možete instalirati pomoću npm-a, upravitelja paketa za Node.js. Otvorite svoj terminal i dođite do direktorija vašeg projekta. Zatim pokrenite sljedeću naredbu:

npm instalirajte react-code-blokove

Ovo će instalirati biblioteku react-code-blocks u vaš projekt.

Dodavanje bloka koda vašem projektu

Nakon što instalirate biblioteku react-code-blocks, spremni ste za početak. Prvo uvezite CodeBlock komponentu iz biblioteke react-code-blocks u vašoj aplikaciji. To možete učiniti dodavanjem sljedećeg koda u svoju datoteku:

uvoz { CodeBlock } iz"reagiraj-kod-blokovi";

Zatim upotrijebite komponentu CodeBlock u svojoj aplikaciji dodavanjem sljedećeg koda:

 tekst='console.log("Zdravo, svijete!");'
 jezik='javascript'
 showLineNumbers={pravi}
 tema={vašaTema}
/>

U gornjem kodu prosljeđujete nekoliko rekvizita komponenti CodeBlock. Ovdje je popis svih dostupnih rekvizita:

• tekst (obavezno): Kod za prikaz u bloku koda.
• jezik (obavezno): Programski jezik koda. Ovo se koristi za označavanje sintakse bloka koda.
• showLineNumbers: Booleova vrijednost koja pokazuje treba li prikazati brojeve redaka u bloku koda ili ne. Zadana je vrijednost false.
• tema: Tema koja se koristi za blok koda. To može biti ugrađena tema ili prilagođeni objekt teme. Zadano je GitHub.
• početniLineNumber: Broj reda od kojeg počinje brojanje. Zadana je vrijednost 1.
• codeBlock: Objekt koji sadrži opcije za blok koda. Ovo može uključivati brojevi redaka (booleova vrijednost koja pokazuje treba li prikazati brojeve redaka ili ne) i wrapLines (booleova vrijednost koja pokazuje treba li prelamati retke ili ne).
• na klik: funkcija koja se poziva kada se klikne na blok koda.

Evo primjera kako koristiti sve ove rekvizite:

uvoz { CodeBlock } iz"reagiraj-kod-blokovi";
funkcijaMoja komponenta() {
konst rukovanjeKlik = () => {
konzola.log("Kliknut je blok koda");
 };
povratak (
 tekst='const pozdrav = "Zdravo, svijete!"; console.log (pozdrav);'
 jezik='javascript'
 showLineNumbers={pravi}
 tema='atom-jedan-taman'
 početni redak={10}
 codeBlock={{ brojevi redaka: lažno, wrapLines: pravi }}
 onClick={handleClick}
 />
 );
}

U gornjem kodu koristite atom-jedan-mrak tema, početak brojeva redaka od 10, onemogućavanje brojeva redaka, omogućavanje prelamanja redaka i prilaganje rukovatelja klikovima.

Korištenjem ovih rekvizita možete prilagoditi izgled i ponašanje svojih blokova koda kako bi odgovarali vašim potrebama.

Dodavanje tema u vaše blokove koda

Biblioteka react-code-blocks nudi niz ugrađenih tema koje se mogu koristiti za prilagodbu izgleda vaših blokova koda. Da biste koristili ugrađenu temu, jednostavno morate navesti naziv teme u tema oslonac Na primjer, za korištenje atom-jedan-mrak temu, upotrijebili biste sljedeći kod:

 tekst='console.log("Zdravo, svijete!");'
 jezik='javascript'
 showLineNumbers={pravi}
 tema='atom-jedan-taman'
/>

Uz ugrađene teme, također možete izraditi prilagođene teme definiranjem JavaScript objekta koji navodi boje koje će se koristiti za različite dijelove bloka koda. Evo primjera kako bi objekt prilagođene teme mogao izgledati:

konst myCustomTheme = {
 lineNumberColor: "#ccc",
 lineNumberBgColor: "#222",
 boja pozadine: "#222",
 boja teksta: "#ccc",
 Boja podniza: "#00ff00",
 boja ključne riječi: "#0077ff",
 atributColor: "#ffaa00",
 selectorTagColor: "#0077ff",
 docTagColor: "#aa00ff",
 Boja imena: "#f8f8f8",
 ugrađeno u boji: "#0077ff",
 doslovna boja: "#ffaa00",
 bulletColor: "#ffaa00",
 codeColor: "#ccc",
 dodatakBoja: "#00ff00",
 regexpColor: "#f8f8f8",
 Boja simbola: "#ffaa00",
 promjenjiva boja: "#ffaa00",
 predložakVariableColor: "#ffaa00",
 Boja veze: "#aa00ff",
 selectorAttributeColor: "#ffaa00",
 selektorPseudoBoja: "#aa00ff",
 tipBoja: "#0077ff",
 stringColor: "#00ff00",
 selectorIdColor: "#ffaa00",
 quoteColor: "#f8f8f8",
 boja oznake predloška: "#ccc",
 Boja brisanja: "#ff0000",
 Boja naslova: "#0077ff",
 Boja odjeljka: "#0077ff",
 komentarBoja: "#777",
 metaKeywordColor: "#f8f8f8",
 metaBoja: "#aa00ff",
 funkcijaBoja: "#0077ff",
 brojBoja: "#ffaa00",
};

Da biste koristili prilagođenu temu, proslijedili biste objekt teme kao rekvizit teme komponente CodeBlock:

 tekst='console.log("Zdravo, svijete!");'
 jezik='javascript'
 showLineNumbers={pravi}
 theme={myCustomTheme}
/>

Ispod je izlaz:

Upotrebom ugrađenih i prilagođenih tema možete prilagoditi izgled svojih blokova koda kako bi odgovarao vašim potrebama i cjelokupnom dizajnu vaše aplikacije.

Dodavanje CopyBlock-a vašem projektu

Ako želite dodati funkciju kopiranja svojim blokovima koda, možete koristiti CopyBlock komponenta koju pruža biblioteka react-code-blocks. Da biste koristili ovu komponentu, morat ćete instalirati react-copy-to-clipboard knjižnica također. Evo kako dodati komponentu CopyBlock svom projektu:

Instalirajte react-copy-to-clipboard knjižnica:

npm instalirajte react-copy-to-clipboard

Uvezite potrebne komponente i biblioteke:

uvoz { CopyBlock } iz'reagiraj-kod-blokova';
uvoz { FaCopy } iz'react-icons/fa';
uvoz kopirati iz'kopirati u međuspremnik';

Koristite komponentu CopyBlock u svom kodu:

konst šifra = 'console.log("Zdravo, svijete!");';
konst jezik = 'javascript';
 tekst={kod}
 jezik={jezik}
 showLineNumbers={pravi}
 wrapLines={pravi}
 tema='drakula'
 codeBlock
 ikona={}
 onCopy={() => kopiraj (kod)}
/>

Ispod je izlaz:

Dodavanjem komponente CopyBlock vašem projektu, možete jednostavno dopustiti korisnicima da kopiraju kod iz vaših blokova koda u svoj međuspremnik.

Alternativne metode za dodavanje blokova koda

Iako je korištenje biblioteke react-code-blocks najjednostavniji način za dodavanje blokova koda u vašu React aplikaciju, postoji i nekoliko alternativnih metoda koje možete koristiti:

1. Ručno dodavanje isticanja sintakse: Ako ne želite koristiti biblioteku, možete ručno dodati isticanje sintakse svom kodu koristeći Tailwind CSS ili normalni CSS. To uključuje dodavanje CSS klasa vašim elementima koda za primjenu odgovarajućih stilova. Iako vam ova metoda daje veću kontrolu nad stilovima, postavljanje i održavanje može oduzimati puno vremena.
2. Korištenje drugih biblioteka: Postoji nekoliko drugih dostupnih biblioteka koje pružaju označavanje sintakse za kod, kao što je react-syntax marker, prism-react-renderer, i istaknuti.js. Ove biblioteke imaju različite značajke i stilove, tako da možete odabrati onu koja odgovara vašim potrebama.

Iako je biblioteka react-code-blocks odličan izbor za većinu aplikacija, ove alternativne metode mogu biti korisne u određenim situacijama. U konačnici, metoda koju odaberete ovisit će o vašim specifičnim potrebama i preferencijama.

Poboljšajte angažman korisnika pomoću blokova koda

Korištenjem blokova koda za objašnjavanje koda, pružanje interaktivnih primjera kodiranja i vizualno stvaranje privlačnim dizajnom, možete poboljšati iskustvo svojih korisnika i zadržati njihovu angažiranost na vašoj web stranici ili primjena. Osim toga, upotrebom značajki kao što su CopyBlock i prilagođene teme, svoju React aplikaciju možete učiniti još funkcionalnijom i privlačnijom.