Tutorial sobre prism.js, inserta ejemplos de código en Web WordPress y Blogger.

Ya hacia un tiempo que andaba buscando como poder introducir ejemplos de código en tu web o blog, me ha costado pero ya lo he descubierto. En esta entrada explicaré con detenimiento prism.js de tan solo 2KB y creado por @LeaVerou.

Para que quede claro o por si queréis hacer otra búsqueda, en inglés se llamaría Code Syntax Highlighters.

Empezaremos descargando los archivos desde este enlace prism.js, podemos personalizar nuestra descarga en función de nuestras necesidades. Hay 5 temas diferentes, 6 plugins para mejorar la funcionalidad y hasta la posibilidad de descargar 15 lenguajes diferentes.

Markup, CSS, Javascript, Java, PHP, Python, CoffeScript...

Una vez que descarguemos los archivos debemos colocarlos en la carpeta de nuestro proyecto y referenciarlos en el archivo HTML donde queramos usar prism.js.

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

Para poder escribir código tendremos que usar algunas etiquetas HTML, las dos con las que empezaremos son <pre> y <code>. Pero cual usar primero?

<pre>, significa texto pre-formateado, se visualiza en una fuente con ancho fijo (Courier) y preserva tanto espacios vacíos como saltos de línea.

<code>, según el W3C lo usaremos para poder escribir fragmentos de código, por defecto se muestran en la fuente monoespacio que use el navegador.

Según la web de prism.js este script solo funciona con la etiqueta <code> ya que es la que semánticamente más se ajusta a lo que queremos hacer, aún así para poder escribir el código y que se muestre con los espacios que dejemos tendremos que empezar por la etiqueta pre y después con code, quedaría de esta manera:

<pre class="language-xxx"><code class="language-xxx">  
               Código
</code></pre>

Las xxx que vemos en el ejemplo de arriba las debemos de substituir por el nombre del lenguaje que queramos utilizar. En este tutorial solo explicaré los lenguajes markup, css y javascript.

Tal vez me olvide o me equivoque en el significado de los "tokens" que pondré a continuación

Empecemos con el HTML:

<pre class="language-markup"><code class="language-markup">  
    Código HTML
</code></pre>

La manera para que podamos escribir el código será con etiquetas <span> a las que añadiremos 2 clases, la primera sería "token" y la segunda será en función a lo que necesitemos. Lo veremos en el ejemplo:

<span class="token punctuation">; , < .</span>
<span class="token tag">script, div, span</span>
<span class="token comment">//Comentario</span>

Para HTML utilizaremos los tokens:

  • comments
  • doctype
  • punctuation
  • tag
  • attr-name
  • attr-value

Tendremos que tener cuidado cuando que queramos escribir los símbolos de las etiquetas, me refiero a "<" y ">" Los tendremos que escribir en código HTML, el símbolo de "menor que <" es representado por &lt; y el símbolo de "mayor que >" se representa con &gt;

Continuemos con el CSS:

<pre class="language-css"><code class="language-css">  
    Código CSS
</code></pre>

Siempre utilizaremos el formato del <span> que hemos visto con el HTML, lo único que cambian son los tokens aunque hay algunos que son comunes a todos los lenguajes como "comments" y "punctuation".

  • comments
  • punctuation
  • property
  • selector
  • url
  • important
  • namespace

Acabemos con JavaScript:

Seguiremos el mismo proceso que hemos utilizado hasta ahora, en esta parte es donde más tokens no he podido diferenciar.

<pre class="language-javascript"><code class="language-javascript">  
    Código JavaScript
</code></pre>

Para javascript vamos a usar los siguientes tokens:

  • comment
  • punctuation
  • boolean
  • string
  • operator
  • number
  • regex
  • keyword

Pongamos un ejemplo:

var Some_var = 'Soy un string';  
var Some_var_1 = false;  
var Some_var_2 = 1234567890;  
var Some_var_3 = regex;  

Continuaré explicando como podemos agregar este script a las plataformas de blogging más conocidas.

En Wordpress es tan sencillo como descargar el plugin para Wordpress e instalarlo. Como podrás ver está un poco sin actualizar pero con unos sencillos cambios a los archivos podemos agregar los temas que no aparecen.

Primero tenemos que descargar los temas en CSS que no tengamos desde la página de prism.js Cada tema nos bajará con el nombre de prism.css por lo que tenemos que cambiarles el nombre, yo usaría el mismo que nos aparece en la web de prism.js.

Después tenemos que buscar la carpeta de los plugins de Wordpress en nuestro servidor, una vez allí buscamos la carpeta de "prism-syntax-highlighter" y dentro de esta buscamos la carpeta de "prism", en esta carpeta es donde colocaremos los archivos CSS que nos hemos descargado.

El siguiente paso es buscar y abrir el archivo "wp-prism.php" para poderlo editar, una vez abierto buscamos en la línea 86 por la función function setting_theme() y donde acaben las opciones de los archivos CSS agregamos las nuevas:

<option value="default.css"'.(($options['theme'] =='default.css') ? 'selected="selected"':'').'>Default</option>

Lo que tendríamos que hacer es cambiar las palabras default por el nombre que le hayamos puesto a nuestros archivos. Recuerda cambiar la opción de la etiqueta para poder diferenciarlos en el plugin!! Ahora, si guardamos el archivo modificado y nos vamos al panel de control del plugin en Wordpress veremos que nos aparecen las opciones que hemos añadido.

Para los plugins que puedan faltar, el proceso sería algo similar. El problema sería que por el momento no los necesito y tendría que tener más conocimientos para modificarlo todo. Tiempo al tiempo!!

Este script es perfecto pero he preferido agregar la numeración de las líneas de otra manera. Buscando por la web he encontrado un plugin para prism para poder añadirle números a las líneas de código, lo estoy usando en este mismo blog!!!

Como hacerlo? Pues tan solo debes de descargarte los archivos CSS y javascript de este link --> Line Numbering Plugin for Prism.

Si comparas los archivos originales de prism.css con el que acabas de descargarte verás que son casi idénticos a parte de que al final del archivo hay unas líneas de código añadidas, se diferencian por los comentarios. Lo que tenemos que hacer es insertar las líneas de código extra a los archivos CSS de cada tema para que podamos usar la numeración de los líneas.

Para añadir el script de los números tendremos que abrir el archivo prism.js y agregar al final del todo el script que nos hemos descargado.

Para poder utilizar las líneas numeradas tendremos que añadir el atributo data-linenumber a la etiqueta <code>, a este atributo le daremos un valor si queremos que la línea empiece por un número en particular data-linenumber="3"

var some_var = 'Hello world';  
alert(some_var);  

La etiqueta <code> también debe de tener un atributo style="counter-reset: valor, este valor será un número menos al que utilizamos en el atributo data-linenumber. Ahora solo queda que englobemos todo el código que queramos que aparezca en cada línea como muestro en el ejemplo:

<code class="language-javascript" data-linenumber="3" style="counter-reset:linenumber 2">  
<span class="line">  
    Código  
</span>  
<span class="line">  
    Código  
</span>  
</code>

Si queremos que empiece por 0 el atributo data-linenumber no tendrá valor y style="counter-reset: -1.

Esto es todo lo que tenemos que hacer para tener el plugin de Wordpress con algunas opciones más.

Para Blogger la cosa está un poco limitada porque solo podremos usar el tema por defecto y sin ningún plugin.

Lo que tenemos que hacer es acceder al area de administración de nuestra cuenta y seguir esta ruta:

Plantilla-->Editar HTML-->CMD+f/CTRL+f para buscar </head> Antes de que termine la etiqueta pegamos estas dos líneas de código:

<link rel="stylesheet" href="https://www.opendrive.com/files/MV8yNTEwMTMyX1RRcTlS/lord%20html%20prism-default.css"/>  
<script type="text/javascript" src="https://www.opendrive.com/files/MV8yNTEwMTMzX0ZKbVdJ/lord%20html%20prism-default.js"></script>

Guardamos los cambios y seguimos los pasos que he descrito más arriba.

Hasta aquí hemos llegado, espero que os sirva de ayuda

Más Javascript:

Rarezas de Javascript

comments powered by Disqus