Pasar al contenido principal
Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

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

Si quieres mostrar ejemplos de código en tu web para documentación o tutoriales, Prism.js es una librería de JavaScript que te permite colorear el código.

¿Cómo colorear código en tu página web con Prism.js? - Blog de Escuela Digital

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

  1. Escoger si va a descargar la versión minificada o la versión de desarrollo.
  2. Escoger el tema (en mi caso uso Okaidia que está inspirado en Monokai, el que usa Sublime Text por default).
  3. 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:

  1. Line Highlight. Que añade los números de línea, para conseguirlo basta añadir la clase line-numbers a la etiqueta pre.
  2. Show language. Muestra el lenguaje utlizado en el cuadro de código. No requiere configurar nada.
  3. 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 &lt; y &gt; 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


p { 
  color: red;
  font-size: .9em; 
}


.div
  .item
    p Hola mundo      

<p>hola</p>
<p>hola</p>
<p>hola</p>

<?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 + "%");
      }
    }
  }
}

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal