Come aggiungere blocchi di codice nella tua app React

Nello sviluppo web, la visualizzazione di blocchi di codice con la corretta formattazione ed evidenziazione è un requisito comune. I blocchi di codice sono uno strumento versatile che può essere utilizzato per una varietà di scopi, tra cui la visualizzazione del codice e il miglioramento del coinvolgimento degli utenti.

Installazione della libreria

Primo, creare un'app React e installa il reagire-blocchi di codice biblioteca. Questa libreria viene utilizzata per visualizzare i blocchi di codice nella tua app. Puoi installare questa libreria utilizzando npm, il gestore di pacchetti per Node.js. Apri il tuo terminale e vai alla directory del tuo progetto. Quindi eseguire il seguente comando:

npm installa i blocchi di codice di reazione

Questo installerà la libreria react-code-blocks nel tuo progetto.

Aggiunta del blocco di codice al tuo progetto

Dopo aver installato la libreria react-code-blocks, sei pronto per iniziare. Innanzitutto, importa il file CodeBlock componente dalla libreria react-code-blocks nella tua app. Puoi farlo aggiungendo il seguente codice al tuo file:

importare { Blocco codice } da"reagire-blocchi di codice";

Quindi, utilizza il componente CodeBlock nella tua app aggiungendo il seguente codice:

 testo='console.log("Ciao mondo!");'
 lingua='javascript'
 mostraNumeriLinea={VERO}
 tema={tuoTema}
/>

Nel codice sopra, stai passando diversi oggetti di scena al componente CodeBlock. Ecco un elenco di tutti gli oggetti di scena disponibili:

• testo (richiesto): Il codice da visualizzare nel blocco di codice.
• lingua (richiesto): Il linguaggio di programmazione del codice. Questo è usato per evidenziazione della sintassi del blocco di codice.
• showLineNumbers:Un valore booleano che indica se visualizzare o meno i numeri di riga nel blocco di codice. L'impostazione predefinita è false.
• tema:Il tema da utilizzare per il blocco di codice. Può trattarsi di un tema integrato o di un oggetto tema personalizzato. L'impostazione predefinita è GitHub.
• numeroriga iniziale: il numero di riga da cui iniziare il conteggio. Il valore predefinito è 1.
• codeBlock: un oggetto contenente opzioni per il blocco di codice. Questo può includere lineNumeri (un valore booleano che indica se visualizzare o meno i numeri di riga) e wrapLines (un valore booleano che indica se eseguire il wrapping delle righe o meno).
• al clic: una funzione da chiamare quando si fa clic sul blocco di codice.

Ecco un esempio di come utilizzare tutti questi oggetti di scena:

importare { Blocco codice } da"reagire-blocchi di codice";
funzioneIl mio componente() {
cost handleClick = () => {
consolare.tronco d'albero("Blocco di codice cliccato");
 };
ritorno (
 testo='const saluto = "Ciao, mondo!"; console.log (saluto);'
 lingua='javascript'
 mostraNumeriLinea={VERO}
 tema='atomo-uno-scuro'
 numerorigainiziale={10}
 codiceBlocco={{ lineNumeri: falso, wrapLines: VERO }}
 onClic={handleClick}
 />
 );
}

Nel codice sopra, stai usando atomo-uno-oscuro tema, iniziando i numeri di riga da 10, disabilitando i numeri di riga, abilitando il ritorno a capo e allegando un gestore di clic.

Utilizzando questi oggetti di scena, puoi personalizzare l'aspetto e il comportamento dei blocchi di codice in base alle tue esigenze.

Aggiunta di temi nei blocchi di codice

La libreria react-code-blocks fornisce una varietà di temi integrati che possono essere utilizzati per personalizzare l'aspetto dei blocchi di codice. Per utilizzare un tema integrato, è sufficiente specificare il nome del tema nel file tema puntello. Ad esempio, per utilizzare il atomo-uno-oscuro tema, dovresti usare il seguente codice:

 testo='console.log("Ciao mondo!");'
 lingua='javascript'
 mostraNumeriLinea={VERO}
 tema='atomo-uno-scuro'
/>

Oltre ai temi incorporati, puoi anche creare temi personalizzati definendo un oggetto JavaScript che specifica i colori da utilizzare per le diverse parti del blocco di codice. Ecco un esempio di come potrebbe apparire un oggetto tema personalizzato:

cost mioTemaPersonalizzato = {
 lineNumberColor: "#ccc",
 lineNumberBgColor: "#222",
 colore di sfondo: "#222",
 colore del testo: "#ccc",
 substringColor: "#00ff00",
 parola chiaveColore: "#0077ff",
 attributoColore: "#ffaa00",
 selectorTagColor: "#0077ff",
 docTagColor: "#aa00ff",
 nomeColore: "#f8f8f8",
 builtInColor: "#0077ff",
 letteraleColore: "#ffaa00",
 proiettileColore: "#ffaa00",
 codiceColore: "#ccc",
 aggiuntaColore: "#00ff00",
 regexpColor: "#f8f8f8",
 simboloColore: "#ffaa00",
 variabileColore: "#ffaa00",
 templateVariableColor: "#ffaa00",
 linkColore: "#aa00ff",
 selectorAttributeColor: "#ffaa00",
 selettorePseudoColore: "#aa00ff",
 tipoColore: "#0077ff",
 stringaColore: "#00ff00",
 selettoreIdColor: "#ffaa00",
 quoteColore: "#f8f8f8",
 templateTagColor: "#ccc",
 cancellazioneColore: "#ff0000",
 titoloColore: "#0077ff",
 sezioneColore: "#0077ff",
 commentColore: "#777",
 metaKeywordColor: "#f8f8f8",
 metaColore: "#aa00ff",
 funzioneColore: "#0077ff",
 numeroColore: "#ffaa00",
};

Per utilizzare un tema personalizzato, devi passare l'oggetto del tema come prop del tema del componente CodeBlock:

 testo='console.log("Ciao mondo!");'
 lingua='javascript'
 mostraNumeriLinea={VERO}
 tema={myCustomTheme}
/>

Di seguito è riportato l'output:

Utilizzando temi integrati e personalizzati, puoi personalizzare l'aspetto dei tuoi blocchi di codice in base alle tue esigenze e al design generale della tua app.

Aggiunta di CopyBlock al tuo progetto

Se vuoi aggiungere la funzionalità di copia ai tuoi blocchi di codice, puoi usare il file CopiaBlocco componente fornito dalla libreria react-code-blocks. Per utilizzare questo componente, dovrai installare il file reagire-copia-negli-appunti anche la biblioteca. Ecco come aggiungere il componente CopyBlock al tuo progetto:

Installa il reagire-copia-negli-appunti biblioteca:

npm install react-copy-to-clipboard

Importa i componenti e le librerie necessari:

importare { CopiaBlocco } da'reagire-blocchi di codice';
importare { FaCopy } da'reagire-icone/fa';
importare copia da'copia negli appunti';

Usa il componente CopyBlock nel tuo codice:

cost codice = 'console.log("Ciao mondo!");';
cost lingua = 'javascript';
 testo={codice}
 lingua={lingua}
 mostraNumeriLinea={VERO}
 wrapLines={VERO}
 tema='dracula'
 codeBlock
 icona={}
 onCopy={() => copia (codice)}
/>

Di seguito è riportato l'output:

Aggiungendo il componente CopyBlock al tuo progetto, puoi facilmente consentire agli utenti di copiare il codice dai tuoi blocchi di codice nei loro appunti.

Metodi alternativi per aggiungere blocchi di codice

Sebbene l'utilizzo della libreria react-code-blocks sia il modo più semplice per aggiungere blocchi di codice alla tua app React, ci sono anche alcuni metodi alternativi che puoi utilizzare:

1. Aggiunta manuale dell'evidenziazione della sintassi: Se non vuoi usare una libreria, puoi aggiungere manualmente l'evidenziazione della sintassi al tuo codice usando Tailwind CSS o CSS normale. Ciò comporta l'aggiunta di classi CSS agli elementi del codice per applicare gli stili appropriati. Mentre questo metodo ti offre un maggiore controllo sugli stili, può richiedere molto tempo per l'impostazione e la manutenzione.
2. Utilizzo di altre librerie: Sono disponibili molte altre librerie che forniscono l'evidenziazione della sintassi per il codice, ad esempio evidenziatore-di-sintassi-di-reazione, prisma-reattore-reattore, E highlight.js. Queste librerie hanno caratteristiche e stili diversi, quindi puoi sceglierne una adatta alle tue esigenze.

Sebbene la libreria react-code-blocks sia un'ottima scelta per la maggior parte delle applicazioni, questi metodi alternativi possono essere utili in determinate situazioni. In definitiva, il metodo che scegli dipenderà dalle tue esigenze e preferenze specifiche.

Migliora il coinvolgimento degli utenti con i blocchi di codice

Utilizzando blocchi di codice per spiegare il codice, fornire esempi di codifica interattivi e creare visivamente design accattivanti, puoi migliorare l'esperienza dei tuoi utenti e mantenerli coinvolti con il tuo sito web o applicazione. Inoltre, utilizzando funzionalità come CopyBlock e temi personalizzati, puoi rendere la tua app React ancora più funzionale e attraente.