Cómo añadir un resaltador de sintaxis de código en nuestra web

Hoy os voy a hablar de highlight.js, un resaltador de sintaxis de código para nuestra web.

La idea, es resaltar cualquier código tanto de blogs, foros, o páginas web, y además, es muy fácil de utilizar, encuentra el bloque de código, detecta el lenguaje y lo resalta.

Soporta 112 lenguajes y 49 estilos, entre ellos: Apache, Bash, C#, C++, CSS, DOS .bat, Delphi, Django, HTML, XML, Java, Javascript, PHP, Perl, Python, Ruby, SQL, Smalltalk, VBScript, diff, etc.

Podemos ver su demo rápidamente aquí.

Muy bien, para trabajar con esta estupenda herramienta tan solo tenemos que seguir 4 sencillos pasos:

Paso 1: descargar el código fuente

Puedes descargar el código fuente aquí.

Paso 2: copiar el código fuente en nuestro proyecto

Ahora, debes copiar la carpeta dentro de tu proyecto web, SIN ELIMINAR NINGÚN ARCHIVO ¡IMPORTANTE¡

Paso 3: importar los archivos

Tenemos que importar los archivos prettify.cssprettify.js en nuestra página de la siguiente manera:

codigo 1

A continuación, dentro del <body> ya podremos introducir el código que queremos mostrar a través de la clase prettyprint, de manera que debemos incorporar:

codigo 2

Paso 4: llamar a la función prettyPrint()

Para finalizar, el último paso es llamar a la función prettyPrint() para visualizar el código de forma bonita:

codigo 3

Y en nuestro navegador podremos ver como aparece:

codigo 4

Como podéis ver, es muy fácil, cómodo y sencillo, y además se puede cambiar el tema al gusto del consumidor.

Existen alternativas tales como:

  1. SyntaxHighlighter
  2. GeSHi – Generic Syntax Highlighter
  3. Quick Highlighter
  4. Google Code Prettify
  5. Pygments
  6. Lighter.js
  7. SHJS – Syntax Highlighting in JavaScript
  8. … y muchos más que ya quedan a vuestra elección

¡Espero que lo disfrutéis!

Advertisements