Tutorial de uso de Prism para syntax highlight

  • Por
Es un plugin avanzado para syntax highlight de código fuente que puedes integrar en una página web, para que los códigos tengan coloreado de sintaxis.

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.

Nota: Realmente, por eliminar solicitudes http al servidor innecesarias, es mucho más adecuado que añadas el CSS de Prism a tu hoja de estilos global y el Javascript a tu archivo de plugins general. Esto siempre es una buena práctica, pues cada solicitud http al servidor incrementa el tiempo de carga de una web.

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.

Nota: Si estás colocando código HTML tendrás dentro del documento tendrás que cambiar por sus códigos especiales las entidades HTML como los caracteres mayor y menor qué el ampersand (&), comillas, etc.

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Armando López Fuentes

26/11/2014
Link incorrecto
El link, aunque dice prismjs.com en realidad lleva a prism.com.
Saludos.

djmashe

28/11/2014
link
Aqui esta el enlace de descarga: http://prismjs.com/download.html

Saludos

soyleal.com

28/11/2014
excelente!
Se lo ve muy bueno y completo! Gracias

Maria

30/11/2014
copiapop
Creamos la nueva forma de buscar y quardar insiraciones. En www.copiapop.es se puede añadir fotos, vídeos y artículos en el espacio ilimitado y totalmente gratis! Tienes miedo de perder todos tus achivos para tu blog? Ahora tendrán todos los datos en un lugar sequro! Es una manera ideal por promoccionar tu trabajo. Estamos muy interesados en tu opion sobre nuestra platforma social. ¡
Pruébenlo! Maria

Victor Gracia

30/11/2014
Plugin
Hola a todos, me parece un plugin estudendo. Soy desarrollador web, y actualmente utilizo phpstorm, que la verdad es bastante fiable como IDE.
Os comparto mi portfolio para que opineis acerca del mismo

www.victorgraciaweb.com

Saludos

Xirux Nefer

08/12/2014
Buen artículo pero hay un par de incorrecciones
Totalmente de acuerdo, prism es lo mejor que hay a día de hoy, eficiente, sigue los estándares, no pesa, es el más completo, es fácil de usar, es personalizable... después de probar varios durante todos estos años me quedo con prism.

En cuanto al artículo quisiera comentaros un par de cosas, primero que el término en español para "syntax highlighting" es "coloreado de sintaxis" y es el término que se recomienda usar (siempre que exista una opción en Español a un término en el idioma foráneo se ha de usar la opción en Español).

Segundo, Lea no es diseñadora, es ingeniera informática. Cualquiera que haya seguido su trayectoria durante un tiempo sabrá que varias veces ha manifestado que no le agrada mucho que le impongan ese título, ya que no domina el campo del diseño, y luego la gente va a pedirle su opinión o hacerle preguntas de diseño y ella no es la persona más adecuada para responder. Así que yo cambiaría "diseñadora" por "ingeniera informática" que es lo que realmente estudió. Por lo mismo, más que "amante de la UX" es "amante de los estándares", lo que la llevó a trabajar para la W3C durante un tiempo.

Tercero, (más que una corrección es una información extra), no se puede cargar prism.js de forma asíncrona, así que si teneis varios js concatenados en un sólo archivo para reducir las llamadas HTTP y lo queréis cargar de forma asíncrona, prism no podría ir ahí, tendríais que cargarlo aparte, o no funcionará.

Por lo demás buen artículo, seguid así, os sigo desde hace tiempo =)

midesweb

11/10/2016
Corregido!
Gracias por los comentarios. Hemos quitado lo de "diseñadora" según sugieres.
El tema del coloreado de sintaxis prefiero mencionar sus términos en los dos idiomas.