Cum să adăugați blocuri de cod în aplicația dvs. React

În dezvoltarea web, afișarea blocurilor de cod cu formatare și evidențiere adecvate este o cerință comună. Blocurile de cod sunt un instrument versatil care poate fi folosit pentru o varietate de scopuri, inclusiv afișarea codului și îmbunătățirea angajamentului utilizatorului.

Instalarea Bibliotecii

Primul, creați o aplicație React și instalați reacționează-cod-blocuri bibliotecă. Această bibliotecă este folosită pentru a afișa blocuri de cod în aplicația dvs. Puteți instala această bibliotecă folosind npm, managerul de pachete pentru Node.js. Deschideți terminalul și navigați la directorul proiectului. Apoi rulați următoarea comandă:

npm instalează react-code-blocks

Aceasta va instala biblioteca react-code-blocks în proiectul dumneavoastră.

Adăugarea blocului de cod la proiectul dvs

Odată ce ați instalat biblioteca react-code-blocks, sunteți gata să începeți. În primul rând, importați

CodeBlock componentă din biblioteca react-code-blocks din aplicația dvs. Puteți face acest lucru adăugând următorul cod în fișierul dvs.:

import { CodeBlock } din"react-code-blocks";

Apoi, utilizați componenta CodeBlock în aplicația dvs. adăugând următorul cod:

 text='console.log("Bună ziua, lume!");'
 limba=„javascript”
 showLineNumbers={Adevărat}
 theme={tema ta}
/>

În codul de mai sus, transmiteți mai multe elemente de recuzită componentei CodeBlock. Iată o listă cu toate elementele de recuzită disponibile:

• text (obligatoriu): Codul de afișat în blocul de coduri.
• limba (obligatoriu): Limbajul de programare al codului. Acesta este folosit pentru evidențierea de sintaxă a blocului de cod.
• showLineNumbers:O valoare booleană care indică dacă se afișează sau nu numerele de linii în blocul de cod. Implicit este false.
• temă:Tema de utilizat pentru blocul de cod. Aceasta poate fi o temă încorporată sau un obiect temă personalizată. Este implicit la GitHub.
• startingLineNumber: Numărul liniei de la care începe numărarea. Este implicit la 1.
• codeBlock: Un obiect care conține opțiuni pentru blocul de cod. Aceasta poate include lineNumbers (un boolean care indică dacă se afișează sau nu numerele de rând) și wrapLines (un boolean care indică dacă să împacheteze liniile sau nu).
• onClick: O funcție de apelat când se face clic pe blocul de cod.

Iată un exemplu de utilizare a tuturor acestor elemente de recuzită:

import { CodeBlock } din"react-code-blocks";
funcţieMyComponent() {
const handleClick = () => {
consolă.Buturuga(„S-a făcut clic pe blocarea codului”);
 };
întoarcere (
 text='const greeting = "Bună, lume!"; console.log (salut);'
 limba=„javascript”
 showLineNumbers={Adevărat}
 tema=„atom-unu-întuneric”
 startingLineNumber={10}
 codeBlock={{ lineNumbers: fals, wrapLines: Adevărat }}
 onClick={handleClick}
 />
 );
}

În codul de mai sus, utilizați atom-unu-întuneric tema, începerea numerelor de linie la 10, dezactivarea numerelor de linie, activarea împachetării liniilor și atașarea unui handler de clic.

Folosind aceste elemente de recuzită, puteți personaliza aspectul și comportamentul blocurilor de cod pentru a se potrivi nevoilor dvs.

Adăugarea de teme în blocurile dvs. de cod

Biblioteca react-code-blocks oferă o varietate de teme încorporate care pot fi folosite pentru a personaliza aspectul blocurilor de cod. Pentru a utiliza o temă încorporată, trebuie pur și simplu să specificați numele temei în temă recuzită. De exemplu, pentru a utiliza atom-unu-întuneric tema, veți folosi următorul cod:

 text='console.log("Bună ziua, lume!");'
 limba=„javascript”
 showLineNumbers={Adevărat}
 tema=„atom-unu-întuneric”
/>

Pe lângă temele încorporate, puteți crea și teme personalizate prin definirea unui obiect JavaScript care specifică culorile de utilizat pentru diferite părți ale blocului de cod. Iată un exemplu despre cum ar putea arăta un obiect cu temă personalizată:

const myCustomTheme = {
 lineNumberColor: "#ccc",
 lineNumberBgColor: "#222",
 culoare de fundal: "#222",
 culoarea textului: "#ccc",
 substringColor: „#00ff00”,
 keywordColor: „#0077ff”,
 attributeColor: „#ffaa00”,
 selectorTagColor: „#0077ff”,
 docTagColor: „#aa00ff”,
 numeCuloare: „#f8f8f8”,
 builtInColor: „#0077ff”,
 literalColor: „#ffaa00”,
 bulletColor: „#ffaa00”,
 codColor: "#ccc",
 plusCuloare: „#00ff00”,
 regexpColor: „#f8f8f8”,
 simbolColor: „#ffaa00”,
 variabilăColor: „#ffaa00”,
 templateVariableColor: „#ffaa00”,
 linkColor: „#aa00ff”,
 selectorAttributeColor: „#ffaa00”,
 selectorPseudoColor: „#aa00ff”,
 tipColor: „#0077ff”,
 stringColor: „#00ff00”,
 selectorIdColor: „#ffaa00”,
 quoteColor: „#f8f8f8”,
 templateTagColor: "#ccc",
 deletionColor: „#ff0000”,
 titleColor: „#0077ff”,
 sectionColor: „#0077ff”,
 comentariuColor: "#777",
 metaKeywordColor: „#f8f8f8”,
 metaColor: „#aa00ff”,
 functionColor: „#0077ff”,
 numberColor: „#ffaa00”,
};

Pentru a utiliza o temă personalizată, ați trece obiectul temă ca suport temă al componentei CodeBlock:

 text='console.log("Bună ziua, lume!");'
 limba=„javascript”
 showLineNumbers={Adevărat}
 theme={myCustomTheme}
/>

Mai jos este rezultatul:

Folosind teme încorporate și personalizate, puteți personaliza aspectul blocurilor de cod pentru a se potrivi nevoilor dvs. și designului general al aplicației dvs.

Adăugarea CopyBlock la proiectul dvs

Dacă doriți să adăugați funcționalitatea de copiere la blocurile dvs. de cod, puteți utiliza CopyBlock componentă furnizată de biblioteca react-code-blocks. Pentru a utiliza această componentă, va trebui să instalați reacţionează-copie-în-clipboard bibliotecă de asemenea. Iată cum să adăugați componenta CopyBlock la proiectul dvs.:

Instalați reacţionează-copie-în-clipboard bibliotecă:

npm instalează react-copy-to-clipboard

Importați componentele și bibliotecile necesare:

import { CopyBlock } din„react-code-blocks”;
import { FaCopy } din„pictograme de reacție/fa”;
import copie din'copiați în clipboard';

Utilizați componenta CopyBlock în codul dvs.:

const cod = 'console.log("Bună ziua, lume!");';
const limba = „javascript”;
 text={cod}
 limba={limba}
 showLineNumbers={Adevărat}
 wrapLines={Adevărat}
 tema="dracula"
 codeBlock
 pictograma={}
 onCopy={() => copie (cod)}
/>

Mai jos este rezultatul:

Adăugând componenta CopyBlock la proiectul dvs., puteți permite cu ușurință utilizatorilor să copieze codul din blocurile dvs. de cod în clipboard.

Metode alternative pentru a adăuga blocuri de cod

În timp ce utilizarea bibliotecii react-code-blocks este cea mai simplă modalitate de a adăuga blocuri de cod în aplicația React, există și câteva metode alternative pe care le puteți folosi:

1. Adăugarea manuală a evidențierii sintaxei: Dacă nu doriți să utilizați o bibliotecă, puteți adăuga manual evidențierea de sintaxă la cod folosind Tailwind CSS sau CSS normal. Aceasta implică adăugarea de clase CSS la elementele de cod pentru a aplica stilurile adecvate. În timp ce această metodă vă oferă mai mult control asupra stilurilor, configurarea și întreținerea poate fi consumatoare de timp.
2. Utilizarea altor biblioteci: Există câteva alte biblioteci disponibile care oferă evidențierea sintaxei pentru cod, cum ar fi reacţionează-sintaxă-evidenţiator, prismă-reacție-renderer, și evidențiați.js. Aceste biblioteci au caracteristici și stiluri diferite, așa că puteți alege una care se potrivește nevoilor dvs.

În timp ce biblioteca react-code-blocks este o alegere excelentă pentru majoritatea aplicațiilor, aceste metode alternative pot fi utile în anumite situații. În cele din urmă, metoda pe care o alegeți va depinde de nevoile și preferințele dumneavoastră specifice.

Îmbunătățiți implicarea utilizatorilor cu blocuri de cod

Prin utilizarea blocurilor de cod pentru explicarea codului, furnizarea de exemple interactive de codare și crearea vizuală modele atrăgătoare, puteți îmbunătăți experiența utilizatorilor dvs. și îi puteți menține implicați cu site-ul dvs. web sau aplicarea. În plus, folosind funcții precum CopyBlock și teme personalizate, puteți face aplicația React și mai funcțională și mai atractivă.