Una de las pendencias históricas de DesarrolloWeb.com era colocar un sistema para coloreado de sintaxis en los códigos que ponemos en los artículos. Nos tenéis que disculpar tantos años de vida de este sitio sin implementar uno. Pero como dicen "más vale tarde que nunca" y tenemos para vosotros, también en tutorial, el que consideramos el mejor sistema de syntax highlight (coloreado de sintaxis), Prism.

Prism es un sistema para colorear la sintaxis del código fuente muy versatil. Está hecho por Lea Verou una de las mayores cracks del CSS que conoce la comunidad internacional de desarrolladores. Desarrolladora frontend, speaker y amante de la UX de la que ya os hemos hablado otras veces por diversos motivos. Ella, junto con otra serie de contribuidores han fabricado un sistema que resulta muy sencillo y útil para hacer syntax highlight en páginas web.

Sirve para la mayoría de los lenguajes que has oído hablar, por supuesto, para casi la totalidad de los que se usan en el mundo Web, HTML, CSS, Javascript, PHP, .Net, Python, SQL... y algunas cosas que no son tanto lenguajes como Git o los archivos "ini" de configuración, etc. El sistema es extensible y es uno de los motivos por los que tenga tantas variantes de lenguajes soportados.

Asimismo tenemos la posibilidad de extenderlo por medio de plugins adicionales para modificar el comportamiento y añadir funcionalidades al coloreado de sintaxis. De hecho, en la página de descarga del componente nos ofrecen también diversos añadidos hechos por diversos desarrolladores que puedes instalar perfectamente.

Si no lo conoces, puedes ir ya mismo a la web de Prism enprismjs.com

Rápidamente os vamos a contar lo que necesitáis hacer para poner en marcha Prism. El sistema está tan bien montado que la verdad es que no nos han dejado mucho trabajo para implementarlo.

Descargar tu "build" personalizada

En la página de "Download" podemos descargar el paquete de Prism que vamos a utilizar, según nuestras necesidades. La descarga del núcleo ocupa muy poco, unas 4Kb, pero para funcionar necesitas diversos otros componentes. De todos modos, está tan bien modularizado que puedes ajustar mucho tu paquete de descarga.

Aparte del core debes elegir tu tema (tienes diferentes temas para adaptarlo a tus gustos o el look & feel de la web donde lo vas a integrar. Luego debes selecciionar los lenguajes que deseas usar para el coloreado de la sintaxis y por último los plugins.

En cuanto a plugins es muy indicado el "Line Numbers" por permitir ver los números de línea, pero seguro que tú encuentras otros que te puedan interesar.

La descarga se realiza en dos partes, el Javascript y el CSS. Ambas partes son necesarias para que el sistema funcione.

Instalar Prism

Para instalarlo puedes colocar directamente el script de Prism en tu página y el enlace con el CSS.

<link href="prism.css" rel="stylesheet" />
<script src="prism.js"></script>

La hoja de estilos es bueno que la coloques en el head y los scripts Javascript antes de cerrar el BODY.

Usar Prism

La manera correcta de usar Prism es mediante la etiqueta CODE. La elección es porque es la etiqueta más adecuada para respetar la semántica del documento. CODE según el W3C sería el único contenedor adecuado para colocar código fuente.

En nuestra etiqueta CODE debemos indicar que Prism se encargue de realizar el coloreado de sintaxis. Para ello tenemos que colocar una clase (class de CSS) que el procesador de Prism entienda. Tendrá la forma "language-NombreDelLeguaje", como por ejemplo language-css o language-php. Para HTML se usa language-markup. Obviamente, para que funcione debes haber descargado el módulo asociado al lenguaje escogido.

Además, para texto preformateado, lo recomendable es usar la etiqueta PRE. Esta etiqueta nos permite que el contenedor se formatee con saltos de línea, tabuladores, etc. colocados en el propio texto.

<pre><code class="language-javascript">var x=0;</code></pre>

Es así de simple, basta colocar esa class de las CSS para que Prism haga todo el trabajo por nosotros. Además si tienes un contenedor padre que ya tiene esa clase CSS, todos los bloques CODE andiados se mostrarían con la sintaxis de ese lenguaje. De este modo, bastaría con tener el class="languaje-xxx" en tu etiqueta HTML para que todos los bloques de código de esa página se coloreen con la sintaxis de ese lenguaje en concreto. Si en un bloque CODE deseas usar otro lenguaje distinto, bastaría con indicarlo en el class de ese elemento.

Plugins para Prism

Hay diversos plugins que puedes usar. Para que funcionen algunos de ellos, como Autolinker (para convertir URL en enlaces) o Show Invisibles (que permite mostrar visualmente aquellos caracteres invisibles en el código como saltos de línea), solo tienes que incluirlos en la descarga de Prism. Para otros tienes que configurar alguna cosilla. Te comento aquí algunos detalles imprescindibles.

El plugin Line Numbers que me parece el más relevante, tienes que indicar con una class de CSS el bloque PRE donde quieres que se vean los números de línea. Ojo, es importante que esa clase la cloques en el PRE y no en la etiqueta CODE.

Además puedes usar el atributo data-start asociando un número, para que la cuenta de líneas comience a partir del valor que tú indiques.

<pre class="line-numbers" data-start="100" class="language-javascript"><code>var vm=this;</code></pre>

El plugin Line highlight considero que también puede ser interesante, sirve para marcar una serie de líneas en el código. También necesita configuración en la etiqueta PRE, por medio del atributo data-line, al que le indicamos qué lineas queremos que se resalten. Algo como data-line="2,7" (líneas dos y siete) o data-line="2,5-8,10" (resaltar las líneas 2, el intervalo de la 5 a la 8 y la línea 10).

Estos dos plugins no funcionan sobre elementos inline y tampoco podemos ponerlos los dos en marcha al mismo tiempo sobre un bloque de código.

De momento eso es todo, puedes ver ejemplos de Prism en los códigos de este mismo artículo.