Ako pridať bloky kódu do aplikácie React

Pri vývoji webu je bežnou požiadavkou zobrazovanie blokov kódu so správnym formátovaním a zvýraznením. Bloky kódu sú všestranný nástroj, ktorý možno použiť na rôzne účely vrátane zobrazovania kódu a zlepšovania zapojenia používateľov.

Inštalácia knižnice

Najprv, vytvorte aplikáciu React a nainštalujte reakčné-kódové-bloky knižnica. Táto knižnica sa používa na zobrazenie blokov kódu vo vašej aplikácii. Túto knižnicu môžete nainštalovať pomocou npm, správcu balíkov pre Node.js. Otvorte terminál a prejdite do adresára projektu. Potom spustite nasledujúci príkaz:

npm install reagovat-code-blocks

Týmto sa do vášho projektu nainštaluje knižnica reakčných blokov.

Pridanie bloku kódu do vášho projektu

Po nainštalovaní knižnice reakčných blokov môžete začať. Najprv importujte súbor CodeBlock komponent z knižnice reakčných kódov blokov vo vašej aplikácii. Môžete to urobiť pridaním nasledujúceho kódu do súboru:

importovať { CodeBlock } od"react-code-blocks";

Potom použite komponent CodeBlock vo svojej aplikácii pridaním nasledujúceho kódu:

 text='console.log("Ahoj, svet!");'
 jazyk='javascript'
 showLineNumbers={pravda}
 theme={yourTheme}
/>

Vo vyššie uvedenom kóde odovzdávate niekoľko rekvizít komponentu CodeBlock. Tu je zoznam všetkých dostupných rekvizít:

• text (povinné): Kód, ktorý sa má zobraziť v bloku kódu.
• jazyk (povinné): Programovací jazyk kódu. Toto sa používa na zvýraznenie syntaxe bloku kódu.
• showLineNumbers:Boolovská hodnota označujúca, či sa majú v bloku kódu zobraziť čísla riadkov alebo nie. Predvolene je to nepravda.
• tému:Téma, ktorá sa má použiť pre blok kódu. Môže to byť vstavaná téma alebo vlastný objekt témy. Predvolene je to GitHub.
• počiatočné číslo riadku: Číslo riadku, od ktorého sa má začať počítanie. Predvolene je to 1.
• codeBlock: Objekt obsahujúci možnosti pre blok kódu. To môže zahŕňať lineNumbers (logická hodnota označujúca, či sa majú zobraziť čísla riadkov alebo nie) a wrapLines (logická hodnota označujúca, či sa majú zalamovať riadky alebo nie).
• po kliknutí: Funkcia, ktorá sa má zavolať po kliknutí na blok kódu.

Tu je príklad použitia všetkých týchto rekvizít:

importovať { CodeBlock } od"react-code-blocks";
funkciuMyComponent() {
konšt handleClick = () => {
konzoly.log("Kliknutie na blok kódu");
 };
vrátiť (
 text='konštantný pozdrav = "Ahoj, svet!"; console.log (pozdrav);'
 jazyk='javascript'
 showLineNumbers={pravda}
 téma =„atóm-jeden-tmavý“
 začiatočné číslo riadku={10}
 codeBlock={{ lineNumbers: falošný, wrapLines: pravda }}
 onClick={handleClick}
 />
 );
}

Vo vyššie uvedenom kóde, ktorý používate atóm-jeden-tmavý tému, počnúc číslami riadkov od 10, deaktivovať čísla riadkov, povoliť zalamovanie riadkov a pripojiť obslužný program kliknutia.

Pomocou týchto rekvizít môžete prispôsobiť vzhľad a správanie svojich blokov kódu tak, aby vyhovovali vašim potrebám.

Pridávanie tém do blokov kódu

Knižnica reakčných blokov kódu poskytuje množstvo vstavaných tém, ktoré možno použiť na prispôsobenie vzhľadu blokov kódu. Ak chcete použiť vstavanú tému, stačí zadať názov témy v súbore tému rekvizita. Napríklad na použitie atóm-jeden-tmavý tému, použili by ste nasledujúci kód:

 text='console.log("Ahoj, svet!");'
 jazyk='javascript'
 showLineNumbers={pravda}
 téma =„atóm-jeden-tmavý“
/>

Okrem vstavaných tém môžete tiež vytvárať vlastné témy definovaním objektu JavaScript, ktorý určuje farby, ktoré sa majú použiť pre rôzne časti bloku kódu. Tu je príklad toho, ako môže vyzerať objekt vlastnej témy:

konšt myCustomTheme = {
 lineNumberColor: "#ccc",
 lineNumberBgColor: "#222",
 farba pozadia: "#222",
 textColor: "#ccc",
 substringColor: "#00ff00",
 farba kľúčového slova: "#0077ff",
 atribútColor: "#ffaa00",
 selectorTagColor: "#0077ff",
 docTagColor: "#aa00ff",
 názovFarba: "#f8f8f8",
 builtInColor: "#0077ff",
 literalColor: "#ffaa00",
 Farba odrážky: "#ffaa00",
 codeColor: "#ccc",
 dodatočná farba: "#00ff00",
 regexpColor: "#f8f8f8",
 farba symbolu: "#ffaa00",
 variabilná farba: "#ffaa00",
 templateVariableColor: "#ffaa00",
 linkColor: "#aa00ff",
 selectorAttributeColor: "#ffaa00",
 selektorPseudoColor: "#aa00ff",
 typFarba: "#0077ff",
 stringColor: "#00ff00",
 selectorIdColor: "#ffaa00",
 citátFarba: "#f8f8f8",
 templateTagColor: "#ccc",
 deleteColor: "#ff0000",
 názov Farba: "#0077ff",
 farba sekcie: "#0077ff",
 farba komentára: "#777",
 metaKeywordColor: "#f8f8f8",
 metaColor: "#aa00ff",
 farba funkcie: "#0077ff",
 čísloFarba: "#ffaa00",
};

Ak chcete použiť vlastnú tému, odovzdali by ste objekt témy ako podperu témy komponentu CodeBlock:

 text='console.log("Ahoj, svet!");'
 jazyk='javascript'
 showLineNumbers={pravda}
 theme={myCustomTheme}
/>

Nižšie je výstup:

Pomocou vstavaných a vlastných tém môžete prispôsobiť vzhľad blokov kódu tak, aby vyhovovali vašim potrebám a celkovému dizajnu vašej aplikácie.

Pridanie CopyBlock do vášho projektu

Ak chcete do svojich blokov kódu pridať funkciu kopírovania, môžete použiť CopyBlock komponent poskytovaný knižnicou respond-code-blocks. Ak chcete použiť tento komponent, musíte nainštalovať reagovať-kopírovať do schránky aj knižnica. Tu je návod, ako pridať komponent CopyBlock do vášho projektu:

Nainštalujte reagovať-kopírovať do schránky knižnica:

npm install reagovať-kopírovať-do-schránky

Importujte potrebné komponenty a knižnice:

importovať { CopyBlock } od'react-code-blocks';
importovať { FaCopy } od'react-icons/fa';
importovať kopírovať od'skopírovať do schránky';

Použite komponent CopyBlock vo svojom kóde:

konšt kód = 'console.log("Ahoj, svet!");';
konšt jazyk = 'javascript';
 text={code}
 language={language}
 showLineNumbers={pravda}
 wrapLines={pravda}
 téma ='dracula'
 codeBlock
 icon={}
 onCopy={() => kopírovať (kód)}
/>

Nižšie je výstup:

Pridaním komponentu CopyBlock do vášho projektu môžete jednoducho umožniť používateľom kopírovať kód z vašich blokov kódu do ich schránky.

Alternatívne metódy na pridávanie blokov kódu

Zatiaľ čo používanie knižnice reagovacích blokov kódu je najjednoduchší spôsob, ako pridať bloky kódu do aplikácie React, existuje aj niekoľko alternatívnych metód, ktoré môžete použiť:

1. Manuálne pridanie zvýraznenia syntaxe: Ak nechcete používať knižnicu, môžete do kódu manuálne pridať zvýraznenie syntaxe pomocou CSS Tailwind alebo normálny CSS. To zahŕňa pridanie tried CSS do prvkov kódu, aby ste použili vhodné štýly. Aj keď vám táto metóda poskytuje väčšiu kontrolu nad štýlmi, jej nastavenie a údržba môže byť časovo náročné.
2. Používanie iných knižníc: K dispozícii je niekoľko ďalších knižníc, ktoré poskytujú zvýraznenie syntaxe pre kód, ako napr reagovať-zvýrazňovač syntaxe, hranol-react-renderer, a highlight.js. Tieto knižnice majú rôzne funkcie a štýly, takže si môžete vybrať takú, ktorá vyhovuje vašim potrebám.

Zatiaľ čo knižnica blokov reagujúcich kódov je skvelou voľbou pre väčšinu aplikácií, tieto alternatívne metódy môžu byť v určitých situáciách užitočné. Nakoniec, spôsob, ktorý si vyberiete, bude závisieť od vašich konkrétnych potrieb a preferencií.

Zlepšite zapojenie používateľov pomocou blokov kódu

Používaním blokov kódu na vysvetlenie kódu, poskytovanie interaktívnych príkladov kódovania a vizuálne vytváranie atraktívnym dizajnom, môžete vylepšiť zážitok svojich používateľov a udržať ich v kontakte s vašou webovou stránkou alebo aplikácie. Navyše, pomocou funkcií, ako je CopyBlock a vlastné motívy, môžete urobiť svoju aplikáciu React ešte funkčnejšou a atraktívnejšou.