Sugerencia rápida Cómo agregar resaltado de sintaxis a cualquier proyecto

En esta lección, usaremos un resaltador de sintaxis basado en JavaScript para agregar rápidamente una funcionalidad de resaltado de sintaxis a cualquier proyecto web, incluso en una página HTML simple!


Paso 1 - Descargar el código fuente

Puede descargar los archivos fuente del resaltador de sintaxis aquí.


Paso 2 - Arrastra el src Directorio en su proyecto

Generalmente renombro esta carpeta a resaltador. No elimines nada aquí, a menos que no anticipes el uso de algunos de los archivos JavaScript específicos del idioma.


Paso 3 - Importar los archivos necesarios

Dentro de su archivo HTML (o de la página que sea responsable de mostrar su vista), importe ambos prettify.css y prettify.js archivos.

     intitulado      

Observe cómo hemos colocado nuestro script en la parte inferior de la página, justo antes del cierre cuerpo etiqueta. Este es siempre un movimiento inteligente, ya que mejora el rendimiento.

A continuación, necesitamos algo para trabajar! El resaltador de sintaxis buscará una pre o código elemento que tiene una clase de impresión bonita. Agreguemos eso ahora.

 
 (function () var jsSyntaxHighlighting = 'rocks';) (); 

Paso 4 - Llamando al prettyprint () Función

El último paso es ejecutar el prettyprint () función. También podemos colocar este bit de código en la parte inferior de la página..

     intitulado    
 (function () var jsSyntaxHighlighting = 'rocks';) (); 

Si ahora vemos la página en el navegador.?

Bueno, eso fue fácil! Pero, como paso final de bonificación, ¿qué sucede si queremos cambiar el tema del resaltador? En ese caso, todo se reduce a editar la hoja de estilo como mejor le parezca. Aún mejor, hay un puñado de hojas de estilo en la galería de temas que puedes usar libremente. Personalmente me gusta el tema del desierto. Para aplicarlo, copie el CSS del enlace anterior, cree una nueva hoja de estilo en su proyecto y pegue el CSS en él. A continuación, actualice la hoja de estilo incluida desde la cabeza sección de su documento.

   intitulado  

En serio, ¿puede ser más simple que eso??