› › Resaltando código con prism.js

Prism.js es, según su creadora (Lea Verou), un nuevo resaltador de sintaxis, ligero, extensible, y con estándares web modernos en mente. Es el resaltador de sintaxis usado por Dabblet, y tengo que decir que es realmente impresionante.

Su núcleo ocupa 1.5kb (una miseria), y su apariencia y funcionalidad es espectacular.

Por otra parte, y es el único hándicap que le veo, es que no funciona en IE7 e IE8 (aunque con un poco de suerte podremos librarnos de el primero pronto ). Por lo menos no por sí sólo, pero siempre se puede preparar un parche para IE8. El motivo es que estos dos navegadores símplemente nunca han respetado los estándares web, y aumentaría mucho el tamaño de la página.

Los lenguajes que vienen por defecto son markup (HTML, XML, etc), javascript y css, aunque yo he creado por mi cuenta el código para resaltar PHP (lo pondré en una entrada posterior).

Yo lo estoy usando actualmente, y no he tenido ningún problema con él. La forma de uso es simple:

Lo primero es tener el CSS correctamente puesto. Podéis obtener el CSS del tema que elijáis desde la página de descarga (seleccionar tema, y después, download CSS).

El contenido del archivo lo podéis insertar en vuestro archivo CSS, o encima de </b:skin> si usáis blogger.

Lo segundo es poner el script en el lugar adecuado. Lo podéis obtener desde la misma página de descarga, seleccionando los lenguajes y pulsando download JS.
Luego debéis subirlo a algún alojamiento (Dropbox, google code, servidor propio…), y ponerlo en html como <script src="url/al/archivo"></script> lo más cerca posible de </body>. Y listo!.

Luego, en el HTML, deberéis de usar algo tal que así:

<pre class="language-tipo"><code>
	<!-- Código -->
</code></pre>

Siendo tipo uno de los lenguajes anteriormente mencionados (markup|javascript|css). Sed pacientes para PHP, requiere más explicación, así que lo separaré.

Ejemplos

Podéis ver varios ejemplos en la página oficial, pero si no te es suficiente, allá van más:

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Título de la página</title>
		<meta name="description" content="Descripción de la página">
		<link rel="stylesheet" href="style.css">
		<!-- Comentario de ejemplo -->
	</head>
	<body>
		<div id="page">
			<section role="main">
				Contenido
			</section>
		</div>
	</body>
</html>

Javascript

(function(window, undefined){
	// Configurar en localStorage una serie de claves desde un objeto
	// Es un ejemplo, hombre, no hace falta que sea útil
	var storage = window.localStorage,
		claves = {
			clave1: "valor1",
			clave2: "valor2"
		},
		i;
	for(i in claves){
		if(claves.hasOwnProperty(i))
			storage.setItem(i, claves[i]);
	}
})(window);

CSS

/* Muestra la url a la que lleva el enlace tras él cuando se va a imprimir el documento */
@media print {
	a[href]:not([href="#"]):not([href^="javascript:"])::after {
		content: "(" attr(href) ")";
	}
}

Como véis es muy fácil de usar, muy visual, y muy ligero, por lo que no tendría miedo a considerarle el mejor resaltador de sintaxis actual.