Cómo agregar resaltado de sintaxis a un bloque de código en React

Una de las características clave de un blog de programación son los bloques de código. No es necesario que los formatee con un resaltador de sintaxis, pero hace que sus blogs se vean mucho mejor si lo hace. También puede mejorar la legibilidad de su código.

Este artículo le mostrará cómo usar react-syntax-highlighter para resaltar bloques de código en React. Creará un componente de bloque de código capaz de resaltar el código que se le pasa utilizando la sintaxis del idioma proporcionado.

Resaltado de sintaxis con react-syntax-highlighter

El resaltador de sintaxis de React le permite resaltar el código usando React. a diferencia de otros resaltadores de sintaxis, react-syntax-highlighter no se basa en ComponentDidUpdate o ComponentDidMount para insertar el código resaltado en el DOM utilizando peligrosamente SetInnerHTML.

Ese enfoque es peligroso porque expone una aplicación a ataques de secuencias de comandos entre sitios.

En su lugar, utiliza un árbol de sintaxis para construir el DOM virtual y lo actualiza solo con cambios.

El componente usa PrismJS y Highlight.js en segundo plano. Puede elegir usar cualquiera para resaltar su código. Es muy fácil de usar ya que proporciona un estilo listo para usar.

El componente react-syntax-highlighter acepta el código, el idioma y el estilo como accesorios. El componente también acepta otras opciones de personalización. Puedes encontrarlos en el Reacciona la documentación del resaltador de sintaxis.

Uso del componente react-syntax-highlighter

Para comenzar a usar el resaltador de sintaxis de React en React, instálelo a través de npm.

npm Instalar en pc Resaltador de sintaxis de reacción --ahorrar

Crear un nuevo componente llamado CodeBlock.js en su aplicación React e importe Resaltador de sintaxis de reacción:

importar Resaltador de sintaxis de 'reaccionar-resaltador de sintaxis';
importar {doco} de 'reaccionar-sintaxis-resaltador/dist/esm/styles/hljs';
constante Bloque de código = ({cadena de código}) => {
devolver (
<Resaltador de sintaxis language="javascript" estilo = {docco}>
 {cadena de código}
</SyntaxHighlighter>
 );
};

El componente SyntaxHighlighter acepta el idioma y el estilo a utilizar. También toma la cadena de código como su contenido.

Puede representar el componente anterior de la siguiente manera:

constante Aplicación = () => {
constante códigoCadena = `
constante Cuadrado = (n) => devolver norte * norte
 `
devolver(
<Bloque de código cadena de código = {cadena de código}/>
 )
}

Es importante tener en cuenta que el uso de react-syntax-highlighter puede aumentar el tamaño de su compilación, por lo que, si lo necesita, puede importar la compilación ligera. La construcción ligera, sin embargo, no tiene estilos predeterminados.

También deberá importar y registrar los idiomas que desee mediante el registrarseIdioma función exportada desde la compilación ligera.

importar { Luz como Resaltador de sintaxis } de 'reaccionar-resaltador de sintaxis';
importar js de 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
SintaxisHighlighter.registerLanguage('javascript', js);

Este componente usa Highlight.js para resaltar el código.

Para usar PrismJS en su lugar, impórtelo desde el paquete react-syntax-highlighter de esta manera:

importar { Prisma como Resaltador de sintaxis } de "reaccionar-resaltador de sintaxis";
importar { vscDarkPlus } de "reaccionar-sintaxis-resaltador/dist/esm/estilos/prisma";

Para la compilación de prism light, importe PrismLight y registre el idioma que está utilizando.

importar { luz de prisma como Resaltador de sintaxis } de 'reaccionar-resaltador de sintaxis';
importar jsx de 'reaccionar-sintaxis-resaltador/dist/esm/languages/prism/jsx';
importar prisma de 'reaccionar-sintaxis-resaltador/dist/esm/estilos/prisma/prisma';
SintaxisHighlighter.registerLanguage('jsx', jsx);

El uso de prism es beneficioso, especialmente cuando se resalta jsx porque react-syntax-highlighter no lo admite por completo.

Adición de números de línea al bloque de código

Ahora que sabe cómo resaltar un bloque de código, puede comenzar a agregar funciones adicionales como números de línea.

Con react-syntax-highlighter, solo necesita pasar mostrarLineNumbers al componente SyntaxHighlighter y configúrelo como verdadero.

<Resaltador de sintaxis language="javascript" estilo={docco} showLineNumbers="verdadero">
 {cadena de código}
</SyntaxHighlighter>

El componente ahora mostrará números de línea junto a su código.

Uso de estilos personalizados en su componente

Aunque react-syntax-highlighter proporciona estilo, es posible que a veces necesite personalizar sus bloques de código.

Para esto, el paquete le permite pasar en línea estilos CSS a la propiedad customStyle como se muestra a continuación:

<Resaltador de sintaxis language="javascript" estilo={vscDarkPlus} customStyle={{borderRadius: "5px", color de fondo: "#001E3C"}} >
 {cadena de código}
</SyntaxHighlighter>

El bloque de código resaltado tendrá un radio de borde personalizado y un color de fondo en este ejemplo.

La importancia del resaltado de sintaxis

Puede usar el paquete react-syntax-highlighter para resaltar el código en React. Puede usar la versión ligera para reducir el tamaño de construcción y personalizar los bloques de código usando sus propios estilos.

Resaltar fragmentos de código hace que su código se vea bien, mejora su legibilidad y lo hace más accesible para los lectores.