Cómo agregar bloques de código en su aplicación React

En el desarrollo web, mostrar bloques de código con el formato y resaltado adecuados es un requisito común. Los bloques de código son una herramienta versátil que se puede utilizar para una variedad de propósitos, incluida la visualización de código y la mejora de la participación del usuario.

Instalación de la biblioteca

Primero, crear una aplicación React e instalar el reaccionar-código-bloques biblioteca. Esta biblioteca se utiliza para mostrar bloques de código en su aplicación. Puede instalar esta biblioteca usando npm, el administrador de paquetes para Node.js. Abra su terminal y navegue hasta el directorio de su proyecto. Luego ejecute el siguiente comando:

npm instalar bloques de código de reacción

Esto instalará la biblioteca de bloques de código de reacción en su proyecto.

Agregar el bloque de código a su proyecto

Una vez que haya instalado la biblioteca de bloques de código de reacción, estará listo para comenzar. Primero, importa el

bloque de código componente de la biblioteca de bloques de código de reacción en su aplicación. Puede hacerlo agregando el siguiente código a su archivo:

importar { Bloque de código } de"bloques de código de reacción";

Luego, use el componente CodeBlock en su aplicación agregando el siguiente código:

 texto='console.log("¡Hola, mundo!");'
 idioma='javascript'
 mostrarNúmerosLíneas={verdadero}
 tema={tuTema}
/>

En el código anterior, está pasando varios accesorios al componente CodeBlock. Aquí hay una lista de todos los accesorios disponibles:

• texto (requerido): El código que se mostrará en el bloque de código.
• idioma (requerido): El lenguaje de programación del código. Esto se usa para resaltado de sintaxis del bloque de código.
• mostrarLineNumbers:Un valor booleano que indica si mostrar o no los números de línea en el bloque de código. Por defecto es falso.
• tema:El tema a usar para el bloque de código. Puede ser un tema integrado o un objeto de tema personalizado. Por defecto es GitHub.
• número de línea inicial: El número de línea desde el que empezar a contar. El valor predeterminado es 1.
• bloque de código: Un objeto que contiene opciones para el bloque de código. Esto puede incluir Línea de números (un valor booleano que indica si mostrar números de línea o no) y envolverLíneas (un valor booleano que indica si se deben ajustar las líneas o no).
• al hacer clic: Una función para llamar cuando se hace clic en el bloque de código.

Aquí hay un ejemplo de cómo usar todos estos accesorios:

importar { Bloque de código } de"bloques de código de reacción";
funciónmicomponente() {
constante handleClick = () => {
consola.registro("Bloque de código hecho clic");
 };
devolver (
 texto='const saludo = "¡Hola, mundo!"; consola.log (saludo);'
 idioma='javascript'
 mostrarNúmerosLíneas={verdadero}
 tema='átomo-uno-oscuro'
 número de línea inicial = {10}
 códigoBloque={{ Línea de números: FALSO, envolverLíneas: verdadero }}
 onClick={handleClick}
 />
 );
}

En el código anterior, está utilizando átomo-uno-oscuro tema, comenzando los números de línea en 10, deshabilitando los números de línea, habilitando el ajuste de línea y adjuntando un controlador de clic.

Al usar estos accesorios, puede personalizar la apariencia y el comportamiento de sus bloques de código para que se ajusten a sus necesidades.

Agregar temas en sus bloques de código

La biblioteca react-code-blocks proporciona una variedad de temas integrados que se pueden usar para personalizar la apariencia de sus bloques de código. Para usar un tema incorporado, simplemente necesita especificar el nombre del tema en el tema apuntalar. Por ejemplo, para usar el átomo-uno-oscuro tema, usaría el siguiente código:

 texto='console.log("¡Hola, mundo!");'
 idioma='javascript'
 mostrarNúmerosLíneas={verdadero}
 tema='átomo-uno-oscuro'
/>

Además de los temas integrados, también puede crear temas personalizados definiendo un objeto de JavaScript que especifique los colores que se usarán para las diferentes partes del bloque de código. Este es un ejemplo del aspecto que podría tener un objeto de tema personalizado:

constante miTemaPersonalizado = {
 colorNúmeroLínea: "#ccc",
 lineNumberBgColor: "#222",
 color de fondo: "#222",
 color de texto: "#ccc",
 color de la subcadena: "#00ff00",
 palabra claveColor: "#0077ff",
 atributoColor: "#ffaa00",
 selectorTagColor: "#0077ff",
 docTagColor: "#aa00ff",
 nombreColor: "#f8f8f8",
 construido en color: "#0077ff",
 color literal: "#ffaa00",
 color de bala: "#ffaa00",
 códigoColor: "#ccc",
 adiciónColor: "#00ff00",
 color de la expresión regular: "#f8f8f8",
 símboloColor: "#ffaa00",
 color variable: "#ffaa00",
 plantillaVariableColor: "#ffaa00",
 Color de enlace: "#aa00ff",
 selectorAttributeColor: "#ffaa00",
 selectorPseudoColor: "#aa00ff",
 tipoColor: "#0077ff",
 color de la cadena: "#00ff00",
 selectorIdColor: "#ffaa00",
 citaColor: "#f8f8f8",
 plantillaTagColor: "#ccc",
 color de eliminación: "#ff0000",
 color del titulo: "#0077ff",
 secciónColor: "#0077ff",
 comentarioColor: "#777",
 metaKeywordColor: "#f8f8f8",
 metaColor: "#aa00ff",
 funciónColor: "#0077ff",
 númeroColor: "#ffaa00",
};

Para usar un tema personalizado, pasaría el objeto de tema como accesorio de tema del componente CodeBlock:

 texto='console.log("¡Hola, mundo!");'
 idioma='javascript'
 mostrarNúmerosLíneas={verdadero}
 tema={miTemaPersonalizado}
/>

A continuación se muestra la salida:

Mediante el uso de temas integrados y personalizados, puede personalizar la apariencia de sus bloques de código para que se ajusten a sus necesidades y al diseño general de su aplicación.

Agregar CopyBlock a su proyecto

Si desea agregar la funcionalidad de copia a sus bloques de código, puede usar el Copiar bloque componente proporcionado por la biblioteca react-code-blocks. Para utilizar este componente, deberá instalar el reaccionar-copiar-al-portapapeles biblioteca también. Aquí se explica cómo agregar el componente CopyBlock a su proyecto:

Instala el reaccionar-copiar-al-portapapeles biblioteca:

npm install reaccionar-copiar-al-portapapeles

Importe los componentes y bibliotecas necesarios:

importar { Copiar bloque } de'bloques de código de reacción';
importar { Copia FaCopy } de'reaccionar-iconos/fa';
importar Copiar de'copiar al portapapeles';

Use el componente CopyBlock en su código:

constante código = 'console.log("¡Hola, mundo!");';
constante idioma = 'javascript';
 texto={código}
 idioma={idioma}
 mostrarNúmerosLíneas={verdadero}
 envolverLineas={verdadero}
 tema='drácula'
 bloque de código
 icono={}
 onCopy={() => copiar (código)}
/>

A continuación se muestra la salida:

Al agregar el componente CopyBlock a su proyecto, puede permitir fácilmente a los usuarios copiar el código de sus bloques de código a su portapapeles.

Métodos alternativos para agregar bloques de código

Si bien usar la biblioteca de bloques de código de reacción es la forma más sencilla de agregar bloques de código a su aplicación React, también hay algunos métodos alternativos que puede usar:

1. Adición manual de resaltado de sintaxis: si no desea utilizar una biblioteca, puede agregar manualmente resaltado de sintaxis a su código usando Tailwind CSS o CSS normales. Esto implica agregar clases de CSS a los elementos de su código para aplicar los estilos apropiados. Si bien este método le brinda más control sobre los estilos, puede llevar mucho tiempo configurarlo y mantenerlo.
2. Uso de otras bibliotecas: Hay varias otras bibliotecas disponibles que proporcionan resaltado de sintaxis para el código, como Resaltador de sintaxis de reacción, Prisma-reaccionar-renderizador, y resaltar.js. Estas bibliotecas tienen diferentes características y estilos, por lo que puede elegir una que se adapte a sus necesidades.

Si bien la biblioteca de bloques de código de reacción es una excelente opción para la mayoría de las aplicaciones, estos métodos alternativos pueden ser útiles en ciertas situaciones. En última instancia, el método que elija dependerá de sus necesidades y preferencias específicas.

Mejore la participación del usuario con bloques de código

Mediante el uso de bloques de código para explicar el código, proporcionar ejemplos de codificación interactivos y crear visualmente diseños atractivos, puede mejorar la experiencia de sus usuarios y mantenerlos comprometidos con su sitio web o solicitud. Además, al usar funciones como CopyBlock y temas personalizados, puede hacer que su aplicación React sea aún más funcional y atractiva.