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!
Puede descargar los archivos fuente del resaltador de sintaxis aquí.
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.
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';) ();
prettyprint ()
FunciónEl ú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??