Kako dodati bloke kode v vašo aplikacijo React

Pri spletnem razvoju je običajna zahteva prikaz blokov kode s pravilnim oblikovanjem in označevanjem. Bloki kode so vsestransko orodje, ki se lahko uporablja za različne namene, vključno s prikazovanjem kode in izboljšanjem sodelovanja uporabnikov.

Namestitev knjižnice

Prvič, ustvarite aplikacijo React in namestite react-code-blocks knjižnica. Ta knjižnica se uporablja za prikaz blokov kode v vaši aplikaciji. To knjižnico lahko namestite z npm, upraviteljem paketov za Node.js. Odprite svoj terminal in se pomaknite do imenika vašega projekta. Nato zaženite naslednji ukaz:

npm namestite react-code-blocks

To bo v vaš projekt namestilo knjižnico react-code-blocks.

Dodajanje bloka kode vašemu projektu

Ko namestite knjižnico react-code-blocks, ste pripravljeni na začetek. Najprej uvozite CodeBlock komponento iz knjižnice react-code-blocks v vaši aplikaciji. To lahko storite tako, da svoji datoteki dodate to kodo:

uvoz {CodeBlock} od"react-code-blocks";

Nato uporabite komponento CodeBlock v svoji aplikaciji tako, da dodate to kodo:

 besedilo='console.log("Pozdravljen, svet!");'
 jezik='javascript'
 showLineNumbers={prav}
 tema={vašaTema}
/>

V zgornji kodi posredujete več rekvizitov komponenti CodeBlock. Tukaj je seznam vseh razpoložljivih rekvizitov:

• besedilo (obvezno): Koda za prikaz v kodnem bloku.
• jezik (obvezno): programski jezik kode. To se uporablja za poudarjanje sintakse bloka kode.
• showLineNumbers: Logična vrednost, ki označuje, ali naj se številke vrstic prikažejo v bloku kode ali ne. Privzeto je false.
• tema: Tema za uporabo kodnega bloka. To je lahko vgrajena tema ali predmet teme po meri. Privzeto je GitHub.
• začetniLineNumber: številka vrstice, od katere začnete šteti. Privzeto je 1.
• codeBlock: Objekt, ki vsebuje možnosti za blok kode. To lahko vključuje lineNumbers (logična vrednost, ki označuje, ali naj se prikažejo številke vrstic ali ne) in wrapLines (logična vrednost, ki označuje, ali naj prelomi vrstice ali ne).
• onClick: Funkcija, ki jo pokličete, ko kliknete blok kode.

Tukaj je primer, kako uporabiti vse te pripomočke:

uvoz {CodeBlock} od"react-code-blocks";
funkcijoMyComponent() {
konst handleClick = () => {
konzola.log("Kliknjen blok kode");
 };
vrnitev (
 besedilo='const pozdrav = "Pozdravljen, svet!"; console.log (pozdrav);'
 jezik='javascript'
 showLineNumbers={prav}
 tema='atom-one-dark'
 začetniLineNumber={10}
 codeBlock={{ lineNumbers: lažno, wrapLines: prav }}
 onClick={handleClick}
 />
 );
}

V zgornji kodi uporabljate atom-one-temno tema, začetek številk vrstic pri 10, onemogočanje številk vrstic, omogočanje preloma vrstic in pripenjanje upravljalnika klikov.

Z uporabo teh rekvizitov lahko prilagodite videz in vedenje blokov kode svojim potrebam.

Dodajanje tem v vaše bloke kode

Knjižnica react-code-blocks ponuja različne vgrajene teme, ki jih lahko uporabite za prilagajanje videza vaših kodnih blokov. Če želite uporabiti vgrajeno temo, morate preprosto določiti ime teme v tema prop. Na primer, za uporabo atom-one-temno temo, bi uporabili naslednjo kodo:

 besedilo='console.log("Pozdravljen, svet!");'
 jezik='javascript'
 showLineNumbers={prav}
 tema='atom-one-dark'
/>

Poleg vgrajenih tem lahko ustvarite tudi teme po meri tako, da definirate objekt JavaScript, ki določa barve za uporabo za različne dele bloka kode. Tukaj je primer, kako bi lahko izgledal objekt teme po meri:

konst myCustomTheme = {
 lineNumberColor: "#ccc",
 lineNumberBgColor: "#222",
 Barva ozadja: "#222",
 textColor: "#ccc",
 substringColor: "#00ff00",
 ključna barva: "#0077ff",
 attributeColor: "#ffaa00",
 selectorTagColor: "#0077ff",
 docTagColor: "#aa00ff",
 nameColor: "#f8f8f8",
 builtInColor: "#0077ff",
 literalColor: "#ffaa00",
 bulletColor: "#ffaa00",
 codeColor: "#ccc",
 dodatekColor: "#00ff00",
 regexpColor: "#f8f8f8",
 barva simbola: "#ffaa00",
 variableColor: "#ffaa00",
 templateVariableColor: "#ffaa00",
 povezavaColor: "#aa00ff",
 selectorAttributeColor: "#ffaa00",
 selectorPseudoColor: "#aa00ff",
 typeColor: "#0077ff",
 stringColor: "#00ff00",
 selectorIdColor: "#ffaa00",
 quoteColor: "#f8f8f8",
 templateTagColor: "#ccc",
 deletionColor: "#ff0000",
 titleColor: "#0077ff",
 Barva razdelka: "#0077ff",
 komentarbarva: "#777",
 metaKeywordColor: "#f8f8f8",
 metaColor: "#aa00ff",
 funkcijaColor: "#0077ff",
 numberColor: "#ffaa00",
};

Če želite uporabiti temo po meri, bi posredovali predmet teme kot podlago teme komponente CodeBlock:

 besedilo='console.log("Pozdravljen, svet!");'
 jezik='javascript'
 showLineNumbers={prav}
 theme={myCustomTheme}
/>

Spodaj je rezultat:

Z uporabo vgrajenih tem in tem po meri lahko prilagodite videz svojih blokov kode, da bo ustrezal vašim potrebam in splošni zasnovi vaše aplikacije.

Dodajanje CopyBlock vašemu projektu

Če želite svojim blokom kode dodati funkcijo kopiranja, lahko uporabite CopyBlock komponenta, ki jo zagotavlja knjižnica react-code-blocks. Če želite uporabljati to komponento, boste morali namestiti reagiraj-kopiraj-v-odložišče tudi knjižnica. Tukaj je opisano, kako dodate komponento CopyBlock v svoj projekt:

Namestite reagiraj-kopiraj-v-odložišče knjižnica:

npm namestite reakcijsko kopiranje v odložišče

Uvozite potrebne komponente in knjižnice:

uvoz { CopyBlock } od'react-code-blocks';
uvoz { FaCopy } od'react-icons/fa';
uvoz kopirati od'kopirati v odložišče';

Uporabite komponento CopyBlock v svoji kodi:

konst koda = 'console.log("Pozdravljen, svet!");';
konst jezik = 'javascript';
 besedilo={koda}
 jezik={jezik}
 showLineNumbers={prav}
 wrapLines={prav}
 tema='drakula'
 codeBlock
 ikona={}
 onCopy={() => kopiraj (kodo)}
/>

Spodaj je rezultat:

Če svojemu projektu dodate komponento CopyBlock, lahko preprosto dovolite uporabnikom, da kopirajo kodo iz vaših kodnih blokov v svoje odložišče.

Nadomestne metode za dodajanje blokov kode

Čeprav je uporaba knjižnice react-code-blocks najpreprostejši način za dodajanje blokov kode v vašo aplikacijo React, obstaja tudi nekaj alternativnih metod, ki jih lahko uporabite:

1. Ročno dodajanje označevanja sintakse: Če ne želite uporabljati knjižnice, lahko svoji kodi ročno dodate označevanje sintakse z uporabo Tailwind CSS ali običajni CSS. To vključuje dodajanje razredov CSS vašim elementom kode za uporabo ustreznih slogov. Čeprav vam ta metoda daje večji nadzor nad slogi, je lahko nastavitev in vzdrževanje zamudno.
2. Uporaba drugih knjižnic: Na voljo je več drugih knjižnic, ki omogočajo označevanje sintakse za kodo, kot npr označevalnik-sintakse reakcije, prism-react-renderer, in highlight.js. Te knjižnice imajo različne funkcije in sloge, tako da lahko izberete tisto, ki ustreza vašim potrebam.

Medtem ko je knjižnica react-code-blocks odlična izbira za večino aplikacij, so te alternativne metode lahko koristne v določenih situacijah. Navsezadnje bo metoda, ki jo izberete, odvisna od vaših posebnih potreb in želja.

Izboljšajte sodelovanje uporabnikov z bloki kode

Z uporabo kodnih blokov za razlago kode, zagotavljanje interaktivnih primerov kodiranja in vizualno ustvarjanje privlačnega dizajna, lahko izboljšate uporabniško izkušnjo in ohranite njihovo zanimanje za vaše spletno mesto oz aplikacija. Poleg tega lahko z uporabo funkcij, kot so CopyBlock in teme po meri, naredite svojo aplikacijo React še bolj funkcionalno in privlačno.