Highlight.js una librería JavaScript para mostrar bloques de códigos en tus webs

En mi anterior tutorial sobre cómo hacer un login con PDO y cifrado de contraseña en php 7 se pueden ver bloques de código en diferentes lenguajes como HTML y PHP. Pues eso es posible gracias a una librería llamada highlight.js que está pensada precisamente para eso, para mostrar bloques de código en tus páginas web e incluso en tus CMS como wordpress.

Es más, esta librería la descubrí por eso porque los plugins de wordpress que en teoría de prometen mostrar código no siempre funcionan y algunas veces el propio wordpress por motivos de seguridad bloquea ciertas partes del código.

Aquí voy a explicar cómo utilizarla para que la pruebes en tus proyectos.

Lo primero que tienes que hacer es descargar JQuery desde su web oficial.

Después tienes que descargar highlight.js desde su web oficial.

Cuando entres en la web de highlight.js le des al botón de get version… verás algo como esto:

highlightjs-lenguajes

Como se aprecia en la imagen esta librería permite el uso de muchísimos lenguajes de programación y eso es una cosa de que personalmente me encanta ya que es muy flexible en ese aspecto.

Pues una vez has llegado a esa parte solo tienes que seleccionar aquellos lenguajes que quieres utilizar (uno o varios) y luego ir bajando hasta encontrar el botón de “download”. Yo en mi caso para este tutorial voy a utilizar HTML, JavaScript, Java y Python.

Cuando te descargues el archivo .rar verás unos cuantos archivos pues solo necesitas 2 de ellos:

Para empezar necesitas el fichero llamado highlight.pack.js ese fichero es la propia librería que tienes que implementar. Pero además si te fijas hay una carpeta llamada styles que dentro contiene muchos ficheros CSS, pues eso es otra cosa que me gusta de esta librería y es que viene con muchos estilos de código como suelen tener los editores de código.

Tienes el famoso tema monokai de sublime text, o el solarized ligth que a mí me encanta entre otros temas…

Pues además de coger la librería coge un fichero css, el que tu prefieras y es hora de ponerse a trabajar.

El funcionamiento es el mismo una vez que has añadido el css y la librería así que la instalación la voy a explicar para WordPress y otros CMS y luego para HTML y ya por último explicare como mostrar el código.

Instalación en WordPress u otros CMS

1.- tienes que subir de la misma forma que subes las fotos los ficheros de JQuery y highlight.js o subirlos a un directorio en tu servidor.

2.- Una vez subidos los ficheros necesitas la ruta completa al archivo, no vale acortar las cosas es decir:

http://tu-dominio/…/highlight.js

http://tu-dominio/…/jquery.min.js

3.- el CSS es otra historia si tu plantilla tiene la opción en su configuración de añadir CSS adicional copia todo el contenido del fichero CSS que quieres usar con highlight.js si no es el caso te recomiendo que lo añadas en el fichero de CSS principal de la plantilla o en el header de la plantilla.

Y con esto tendríamos highlight.js preparado en nuestro WordPress o cualquier otro CMS

Instalación en HTML

Aquí no tiene mucho misterio, en el head añades el fichero CSS y luego añades JQuery y highlight.js.

Una cosa, normalmente (es más yo lo hago) librerías y cosas como JQuery y demás es recomendable ponerlo al final del body para que se cargue la web y luego las librerías. En este caso creo que no vale, que tiene que estar cargado primero JQuery y luego highlight.js.

Como usar highlight.js

Si utilizas un CMS crea un bloque de código (normalmente las plantillas tienen esa opción) y añade el siguiente código:


  <script src="https://tu-dominio/.../jquery.min.js"></script>
  <script src="https://tu-dominio/.../highlight.js"></script>
	
  <script>hljs.initHighlightingOnLoad();</script>

Dentro del src=”” de la etiqueta script asegúrate de poner bien la url de los ficheros de JQuery highlight.

En el caso de que estés con HTML como ya tienes añadido lo anterior solo tienes que poner esta línea:


 <script>hljs.initHighlightingOnLoad();</script>

Por último tienes que abrir una etiqueta pre de texto preformateado y dentro abrir una etiqueta code donde tienes que ponerle el atributo class y especificar el nombre del lenguaje de programación que quieres utilizar en atributo class.

Es decir, algo así:


<pre>
<code class="java">
 BLOQUE DE CODIGO
</code>
</pre>


<pre>
<code class="python">
 BLOQUE DE CODIGO
</code>
</pre>

Y el resultado de Java seria:


 public class HolaMundo {
  public static void main(String[] args) {
   System.out.println("Hola mundo");
  } 
 }

Y el resultado de Python seria:


 print("hola mundo")

Antes de que se me olvide esta librería tiene un pequeño inconveniente en lenguajes como PHP y HTML y es que ciertos elementos como es el caso de <> y otros caracteres tienes que cambiarlos por el código ASCII de lo contrario el plugin falla y no interpreta bien el código.

Si tienes alguna duda puedes enviarme un correo.

Esto es todo, espero que pueda ayudarte como me ayuda a mí.

¡¡no olvides compartir!!

anterior
siguiente

© Copyright – Antonio Páez- Programación Web –