Usando PrismJS como resaltador de sintaxis en React

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. ¿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: ... ... 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 p { color: red } Para JavaScript console.log("Hello World") No agregue ningún espacio entre y , 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 y . 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 ( Code Syntax Block {language} {code} ); } 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: código app.js para su referencia. import React from "react"; import Code from "./components/Code"; const JSCode = `const App = props => { return ( Prism JS Awesome Syntax Highlighter ); }; `; const htmlCode = ` PrismJS Tutorial Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind.

`; export default function App() { return ( ); } 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í

Usando PrismJS como resaltador de sintaxis en React

Demasiado Largo; Para Leer

Company Mentioned

@itsmycode

HISTORIAS RELACIONADAS