¿Cómo colorear código en tu página web con Prism.js?

Si quieres mostrar código en tu página web (por ejemplo, para documentación o tutoriales) basta con encerrar el código entre las etiquetas <pre><code> Su código </code></pre>. La etiqueta <code></code> es semántica e indica que estamos escribiendo código. Y la etiqueta <pre></pre> sirve para respetar los saltos de línea y los espacios al mostrar el código.

Veamos un ejemplo

// Scroll animate
$('a[href^="#"]').on('click',function (e) {
  e.preventDefault();
  var target = this.hash;
  var $target = $(target);
  $('html, body').stop().animate({
      'scrollTop': $target.offset().top
  }, 900, 'swing', function () {
      window.location.hash = target;
  });
});

Esto está muy bien, pero sería mucho mejor si pudieramos presentar el código coloreado tal como se ve en un editor de código. Para conseguirlo existen muchas soluciones, algunas del lado del cliente y otras del lado del servidor. He probado varias y me ha gustado el enfoque de prism.js, además veo que se usa en varios sitios importantes como Mozilla Developer Network, Css Tricks, A list apart, etc (eso por sí solo ya dice bastante).

Y aunque el diseño del header de su página web es terriblemente feo no nos dejemos engañar ya que esta herramienta es muy eficiente, bastante ligera, y de uso sencillo.

¿Cómo usar prism.js?

Para usarlo hay que ir a la página del proyecto http://prismjs.com y pulsar el botón Download para ir a la página de descargas http://prismjs.com/download.html

Escoger si va a descargar la versión minificada o la versión de desarrollo.
Escoger el tema (en mi caso uso Okaidia que está inspirado en Monokai, el que usa Sublime Text por default).
Escoger los lenguajes que queremos que reconozca prism. Entre paréntesis vemos el peso de cada libreria.

Una vez terminada de personalizar la descarga, podemos hacer clic en los botones Download JS y Download CSS de la parte inferior de la página y agregarlos a nuestro proyecto. Para que todo funcione sin problemas, es recomendable cargar el archivo prism.js al final del body.

<!DOCTYPE html>
<html>
  <head>
    <link href="css/prism.css" rel="stylesheet" />
  </head>
  <body>
    <script src="js/prism.js"></script>
  </body>
</html>

Ahora, para que prism reconozca y coloree el código basta usar la estructura

<pre class="language-xxx"><code>
Su codigo
</code></pre>

Remplace xxx por el nombre del lenguaje correspondiente. Por ejemplo: language-css, language-javascript , language-ruby, etc. Con eso ya tienes a prism.js funcionando.

Si va a escribir código HTML la clase no debe ser language-html, sino language-markup

Plugins

En la página de descarga se pueden escoger los plugins que deseemos. Queda en cada uno investigarlos. Sin embargo, recomiendo tres:

Line Highlight. Que añade los números de línea, para conseguirlo basta añadir la clase line-numbers a la etiqueta pre.
Show language. Muestra el lenguaje utlizado en el cuadro de código. No requiere configurar nada.
Remove initial line feed. Por algún motivo que no entiendo, prism agrega una línea en blanco al inicio del código. Este plugin la elimina. Tampoco hay que configurar nada.

Entidades HTML

Si dentro del código existen los símbolos < y > será necesario remplazar estos por sus entidades html respectivas < y > en caso contrario el navegador interpretará los simbolos e intentará interpretar el código. Tenga esto en cuenta al escribir código html y php principalmente.

Ejemplos

1
2p { 
3  color: red;
4  font-size: .9em; 
5}
6

1
2.div
3  .item
4    p Hola mundo      
5

1
2<p>hola</p>
3<p>hola</p>
4<p>hola</p>
5

<?php echo "Hola mundo"; ?>

// Scroll animate
$('a[href^="#"]').on('click',function (e) {
  e.preventDefault();
  var target = this.hash;
  var $target = $(target);
  $('html, body').stop().animate({
      'scrollTop': $target.offset().top
  }, 900, 'swing', function () {
      window.location.hash = target;
  });
});

// Anchos por porcentajes (ED GRID)
@each $size, $screen-size in $breakpoints{
  @media all and (min-width: $screen-size){
    @for $i from 1 through 20 {
      .#{$size}-#{$i*5},
      .grupo .caja.#{$size}-#{$i*5}{
        width: unquote($i*5 + "%");
      }
    }
  }
}