20,612 lecturas

Usando PrismJS como resaltador de sintaxis en React

por Srinivas Ramakrishna2021/11/10

Demasiado Largo; Para Leer

PrismJS es una biblioteca escrita con JavaScript, que se utiliza para resaltar la sintaxis o el código. Es una de las bibliotecas más populares que utilizan millones de sitios web para resaltar el bloque de código. Prism es liviano (2 KB), intuitivo, ultrarrápido y extensible en comparación con otras bibliotecas. El idioma se define de la forma recomendada en el borrador de HTML5: a través de una clase language-xxxx. Hay complementos para Prism que brindan funciones adicionales, y si es necesario, puede seleccionar los complementos relevantes usando la casilla de verificación.

Company Mentioned

featured image - Usando PrismJS como resaltador de sintaxis en React

¿Por qué PrismJS?

Hay varias otras bibliotecas como Highlight.js, Syntaxhighlighter, Rainbow, etc. Sin embargo, Prism se destaca como única entre la multitud debido a las diversas funciones que ofrece. Prism es muy liviano (2 KB), intuitivo, ultrarrápido y extensible en comparación con otras bibliotecas.

Características de PrismJS

Echemos un vistazo a las características principales de Prism. Para ver el conjunto completo de funciones, consulte el sitio web oficial de PrismJS.

Muy ligero, la biblioteca principal tiene un tamaño de 2 KB cuando se minimiza y se comprime con gzip.
Admite una amplia variedad de idiomas. Según la documentación oficial, admite más de 275 idiomas.
Fácil de implementar en cualquier pila tecnológica como WordPress, React, Angular, etc.
PrismJS se puede extender fácilmente con la ayuda de un gancho y sin modificar el código.
Fácil de ampliar o definir nuevos lenguajes con la comprensión de la expresión regular.
Admite la mayoría de los navegadores; Borde, IE11, Firefox, Chrome, Safari, Ópera.
Refuerza el uso del marcado <code> y también admite código en línea con etiquetas <pre> . El idioma se define utilizando la recomendación de borrador de HTML5: a través de una clase language-xxxx.

¿Cómo agregar resaltado de sintaxis de Prism.js a cualquier sitio web?

La implementación de PrismJS es sencilla y no requiere un conocimiento profundo de codificación.

Paso 1: descargue la biblioteca PrismJs del sitio web oficial haciendo clic en el botón de descarga.

Seleccione la versión minimizada, el tema que le guste y marque todos los lenguajes de codificación que desea que Prism reconozca y resalte en su sitio web o artículo.

Hay complementos para Prism que proporcionan características adicionales. si los necesita, puede seleccionar los complementos relevantes usando la casilla de verificación.

Paso 2: Una vez que haya terminado la selección, haga clic en el botón Descargar JS y Descargar CSS en la parte inferior de la página para descargar los archivos prism.js y prism.css generados.

Paso 3: Incluya los archivos prism.css y prism.js que ha descargado en la página HTML, como se muestra a continuación.

 <!DOCTYPE html> <html> <head> ... <link href="css/prism.css" rel="stylesheet" /> </head> <body> ... <script src="js/prism.js"></script> </body> </html>

Paso 4: los archivos están incluidos y está listo para usarlos como resaltador de sintaxis. Destaquemos algún código CSS como ejemplo.

Si desea resaltar el código CSS, debe usar la clase "language-css". Para JavaScript, será "lang-js" o "lang-JavaScript".

para CSS

 <pre><code class="language-css">p { color: red }</code></pre>

Para JavaScript

 <pre><code class="language-js">console.log("Hello World")</code></pre>

Nota: No agregue ningún espacio entre <pre> y <code>, lo mismo se mostrará en la página. Además, dado que es un HTML simple, no agregue ningún salto de línea dentro de las etiquetas <pre> y <code>.

Para ver la lista completa de clases para cada idioma, puede consultar https://prismjs.com/#languages-list

Cómo hacer que PrismJS funcione en React

Paso 1: Instale PrismJS y el paquete babel-plugin-prismjs usando el comando npm como se muestra a continuación. El complemento de babel es responsable de cargar el CSS y el soporte de idiomas para Prism.js.

Nota: Para facilitar la configuración de su instancia de Prism solo con los idiomas y los complementos que necesita, use el complemento babel babel-plugin-prismjs . Esto le permitirá cargar la cantidad mínima de idiomas y complementos para satisfacer sus necesidades.

$ npm install prismjs $ npm install babel-plugin-prismjs

Paso 2: En tu .babelrc , registra el complemento y configura sus dependencias. Aquí puede configurar los idiomas, temas, complementos, etc. Si aún no tiene un archivo .babelrc, cree uno en la carpeta raíz de su código fuente y agregue el siguiente JSON al archivo .babelrc.

 { "plugins": [ ["prismjs", { "languages": ["javascript", "css", "markup"], "plugins": ["line-numbers"], "theme": "okaidia", "css": true }] ] }

Paso 3: Cree un código de componente de reacción simple.js e importe PrismJS en su componente de reacción y configure el componente para leer los accesorios de idioma de App.js A continuación se muestra el fragmento del componente de código.js.

 import React, { useEffect } from "react"; import Prism from "prismjs"; export default function Code({ code, language }) { useEffect(() => { Prism.highlightAll(); }, []); return ( <div className="Code"> <h2> Code Syntax Block {language}</h2> <pre> <code className={`language-${language}`}>{code}</code> </pre> </div> ); }

Paso 4: en App.js, importe y llame al componente de código como se muestra a continuación. Pase los accesorios (lenguaje y sintaxis de código) dinámicamente al componente de código.

<Code code={JSCode} language="javascript" /> <Code code={htmlCode} language="html" />

código app.js para su referencia.

 import React from "react"; import Code from "./components/Code"; const JSCode = `const App = props => { return ( <div> <h1> Prism JS </h1> <div>Awesome Syntax Highlighter</div> </div> ); }; `; const htmlCode = ` <div> <h1> PrismJS Tutorial </h1> <p> Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. </p> </div> `; export default function App() { return ( <div className="App"> <Code code={JSCode} language="javascript" /> <Code code={htmlCode} language="html" /> </div> ); }

Paso 5: Ejecute la aplicación de reacción usando npm run start y debería ver a PrismJS resaltando el código automáticamente.

El tutorial de muestra de PrismJS React está alojado en el repositorio de Github , no dude en descargarlo y modificarlo según sus necesidades.

Publicado por primera vez aquí