Syntax highlighting para tu web con JavaScript

Los que solemos visitar  blogs tecnológicos u orientados a temas de programación,  estamos acostumbrados a ver como en estos blogs se acostumbra a colorear las lineas de código de una forma diferente al resto del texto del blog. Con esto no solo se consigue diferenciar el texto del código, si no que hace que el código que se muestra sea mucho mas claro y legible para el lector.  Y no solo por que el uso de diferentes colores hace que se diferencien mejor los  elementos del código, si no también por que los colores  suelen ser los mismo o parecidos a los usados por IDEs o editores de texto a los que estamos acostumbrados los programadores.

Conseguir este coloreado de sintaxis en blogs creados con  WordPress es bastante sencillo; basta  con instalar unos de los muchos plugins existentes para este propósito. Pero si queremos conseguir este efecto en blogs que no cuentan con plugins (como es el caso de Tumblr) o en nuestra web personal que podemos hacer?

La respuesta es: Prettify

Pretiffy es un proyecto alojado en Google Code y que cuenta con licencia Apache 2.0 por lo que somos libres de usarlo en cualquiera de nuestros blogs.

Esta hecho en JavaScript e integrarlo en nuestro código es muy sencillo. Tan solo tenemos que copiar la siguiente linea entre las etiquetas <head> de nuestro blog/web.

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

Una vez añadida esa linea podemos colorear el texto que queramos escribiéndolo dentro de las etiquetas :

<pre class="prettyprint">...</pre>
<!-- or --> 
<code class="prettyprint">...</code>

Prettify detecta automáticamente el lenguaje de programación del código que insertemos, por lo que no tenemos que preocuparnos de indicárselo explícitamente. Ademas por defecto soporta una gran lista de lenguajes: C , Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, Makefiles  y Rust. Y según la web del proyecto funciona medianamente bien con  Ruby, PHP, VB;  aunque también se puede añadir soporte a otros lenguajes como Scala, Haskell, Go… a través de extensiones. 

Por defecto Prettify usa un coloreado con fondo claro; pero esto también lo podemos cambiar. Existen algunos temas de colores del propio proyecto que podemos usar, o podemos usar el nuestro propio.

Para usar uno de los temas del proyecto no tenemos mas que modificar la linea de código que hemos insertado en nuestro blog/web donde hemos indicado la dirección del archivo .js del proyecto, y añadirle el valor “skin=” y el nombre del tema. Por ejemplo si quisiéramos usar el tema desert, nos quedaría algo así:

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=desert"></script>

Como vemos es un algo muy sencillo de utilizar y que nos puede ser de gran ayuda si necesitamos de una herramienta para colorear la sintaxis de código en nuestro blog o web personal.

Podeis encontrar mas informacion sobre este proyecto en:

Prettify

Pettrify – Readme

Pettrify – Getting Started

Entrada anterior
Eliminar virus extensiones archivos cambiados a .LNK
Entrada siguiente
Instalar TeamSpeak3 Server en Debian Wheezy

No se han encontrado resultados.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Rellena este campo
Rellena este campo
Por favor, introduce una dirección de correo electrónico válida.
Necesita estar de acuerdo con los términos para continuar

Menú