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 bloques de código.  ¿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   y también admite código en línea con etiquetas   . El idioma se define utilizando la recomendación de borrador de HTML5: a través de una clase language-xxxx. <code> <pre>  ¿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.    descargue la biblioteca PrismJs del sitio web oficial haciendo clic en el botón de descarga. Paso 1:  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.    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 2:    Incluya los archivos prism.css y prism.js que ha descargado en la página HTML, como se muestra a continuación. Paso 3:   <!DOCTYPE html> <html> <head> ... <link href="css/prism.css" rel="stylesheet" /> </head> <body> ... <script src="js/prism.js"></script> </body> </html>    los archivos están incluidos y está listo para usarlos como resaltador de sintaxis. Destaquemos algún código CSS como ejemplo. Paso 4:  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>    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>. Nota:  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.    Para facilitar la configuración de su instancia de Prism solo con los idiomas y los complementos que necesita, use el complemento   . Esto le permitirá cargar la cantidad mínima de idiomas y complementos para satisfacer sus necesidades. Nota: babel babel-plugin-prismjs   $ npm install prismjs $ npm install babel-plugin-prismjs    En tu   , 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. Paso 2: .babelrc   { "plugins": [ ["prismjs", { "languages": ["javascript", "css", "markup"], "plugins": ["line-numbers"], "theme": "okaidia", "css": true }] ] }    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. Paso 3:   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> ); }    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. Paso 4:   <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> ); }    Ejecute la aplicación de reacción usando   y debería ver a PrismJS resaltando el código automáticamente. Paso 5: npm run start  El tutorial de muestra de PrismJS React está alojado en el repositorio de   , no dude en descargarlo y modificarlo según sus necesidades. Github   Publicado por primera vez  aquí

Mind

2022 - HackerNoon Contributor of the Year - Programming

2022 - Pythonistas Paradise

Coding Guru of 2022

catchsrinivas

Nominated for 2022 - HackerNoon Contributor of the Year - Programming

Nominated for 2022 - Pythonistas Paradise

Nominated for Coding Guru of 2022

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Usando PrismJS como resaltador de sintaxis en React

Usando PrismJS como resaltador de sintaxis en React

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

De los foros a los feeds: cómo los algoritmos de las redes sociales influyen en la interacción digital

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

El modelo Bitcoin UTXO, impulsando un ecosistema único

De los foros a los feeds: cómo los algoritmos de las redes sociales influyen en la interacción digital

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

El modelo Bitcoin UTXO, impulsando un ecosistema único

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps