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.

6 pensamientos en “Resaltando código con prism.js

  1. Bitacoras.com
    • Imagen de Emilio Cobos Álvarez el dijo:

      Yo cada vez que pruebo no tengo muchos problemas para hacerlo funcionar. De hecho yo en las entradas sólo pongo <pre><code></code></pre>. Luego la clase se la añado via Javascript…

      Si usas una etiqueta o clase para el código, puedes hacer algo así con javascript antes del script (es casi una réplica de lo que hago yo).

      Como ves el truco está en reemplazar los nodos correspondientes y añadir la clase y luego ya resaltarlo.

      Si quieres puedes probarlo desde la consola en tu sitio, creo que funciona bien ;)

      (function(){
      	var getLanguage = function(content){
      		var language,
      			extendedLanguage;
      
      		if(content.indexOf('<?php') > -1) {
      			extendedLanguage = 'php';
      			language = 'markup'; // En realidad es PHP dentro de HTML
      		// Blogger xml
      		} else if(/<b:(if|else|include|includable|widget|section)|expr:[a-z-]+='|data:(blog|post|comment)\./.test(content)) {
      			extendedLanguage = 'blogger-xml';
      			language = 'markup';
      		// xml
      		} else if(content.indexOf('<?xml') > -1) {
      			extendedLanguage = 'xml';
      			language = 'markup';
      		// php a secas, sin <?php
      		} else if ( /\barray\s?\(|\b(echo|isset|foreach|endforeach|endwhile|endfor|var_dump)\b/.test(content) ) {// No endif por comentarios condicionales de XHTML
      			language = extendedLanguage = 'php';
      		// html
      		} else if (/<script(\stype=['"]text\/javascript['"])?>/.test(content)) {
      			extendedLanguage = 'html';
      			language = 'markup';
      		} else if ( /((window|document)\.)|(function(\s|\())|((^|\s|\n)var\s[a-zA-z]+\s?=\s?("|'|\[|\{))/.test(content) ) {
      			if( content.indexOf('jQuery') > -1 || /\$(\.(each|trim|ajax)\b|\(function|\(('|")[a-zA-z1-9_\-\.]+('|")\)\.)/.test(content) ) {
      				extendedLanguage = 'jQuery';
      			}
      			language = 'javascript';
      		// XML / HTML
      		} else if( /<[a-z]+[^>]+>/.test(content) ) {
      			if( /<(a|abbr|p|div|section|aside|time|address|input|textarea)\b/.test(content) ){
      				extendedLanguage = 'html';
      			}
      			language = 'markup';
      		// CSS por defecto (es el más difícil de detectar)
      		} else {
      			if( /\b@(include|extend)\b/.test(content) ){
      				extendedLanguage = 'scss';
      			}
      			language = 'css';
      		}
      		return [language, extendedLanguage];
      	}
      	if ( !  document.querySelectorAll || ! Array.prototype.forEach )
      		return; // no soportado (básicamente IE 7/8, que además tienen un bug al configurar innerHTML)
      	[].forEach.call(document.querySelectorAll('.vercodigo'), function(bloque){
      		var codigo = bloque.innerHTML.replace(/<br\s?\/?>/gi,"\n").trim(),
      			lenguaje = getLanguage(codigo),
      			nuevoBloque = document.createElement('pre'),
      			bloqueCodigo = nuevoBloque.appendChild(document.createElement('code'));
      		
      		nuevoBloque.className = "vercodigo language-" + lenguaje[0];
      
      		nuevoBloque.setAttribute("data-language", lenguaje[0]);
      		if( lenguaje[1] )
      			nuevoBloque.setAttribute('data-extended-language', lenguaje[1]);
      
      		bloqueCodigo.innerHTML = codigo;
      
      		bloque.parentNode.replaceChild(nuevoBloque, bloque);
      	})
      })()

      La función que más ocupa es la del lenguaje, puedes adaptarla a tus necesidades, o puedes no usarlo, que no te voy a comer ;)

      Por pereza que no sea! xD

      • Imagen de oloman el dijo:

        No lo había desarrollado nunca porque como sabes tengo un nivel bajo-porlossuelos de JavaScript, pero suponía que se podría hacer con sustituciones/añadidos. De todas formas tampoco estoy por meter más código en la plantilla porque ya va bastante lenta y lo que tengo que hacer es quitar la mitad de cosas que tengo.
        De todas formas gracias por el esfuerzo :)

  2. PHP en prism.js | Emilio Cobos-CMC
  3. Imagen de Julio CésarJulio César el dijo:

    Hola muy bueno tu aporte , tengo un problema para HTML no me funciona pero para css y js si. no se por que , tengo este code .

     
    
    	
    
    

    agradezco de antemano tu ayuda..

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.