miércoles, 4 de abril de 2012

Sintaxis resaltada con Rainbow y jQuery

Rainbow es un plugin para jQuery que permite mostrar códigos que queremos compartir, agregándoles estilo, de tal modo que la sintaxis se destaque y sea fácilmente legible.

A diferencia de muchos otros, tiene la particularidad de ser muy liviano y el script, lo podemos personalizar, seleccionando los idiomas que solemos usar (HTML, JavaScript, CSS, PHP, Ruby, Shell, Python, C) de esta forma, el código a cargar se reduce de modo sustancial.


A esto, se le suma la posibilidad de utilizar distintos temas de CSS que podemos descargar y aplicar o, simplemente copiar y pegar su contenido dentro de etiquetas <style> </style>. En este momento hay seis de ellos disponibles y como sólo definen unas pocas reglas de estilo, son sencillos de modificar manualmente, adaptándolos a nuestros gustos personales.

Así que si queremos usar el plugin, lo pondríamos antes de </head>:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'></script>
<script src='URL_rainbow-custom.min.js' type='text/javascript'></script>
<link href='URL_theme.css' rel='stylesheet" type='text/css'>

Para utilizarlo en cualquier entrada, basta usar las etiquetas PRE y CODE y, en esta última, indicar el tipo de lenguaje; de este modo:

<pre>
<code data-language="javascript">
....... el código que queremos mostrar .......
</code>
</pre>

Se vería algo así:

<pre>
<code data-language="javascript">
....... el código que queremos mostrar .......
</code>
</pre>

Lo mismo ocurrirá con cualquiera de los lenguajes que hayamos seleccionados; sólo hace falta indicarlos en el atributo data-language.

data-language="javascript"

  if(cP==0) {
cE = parseInt(json.feed.openSearch$totalResults.$t);
cP = parseInt(cE / ppp) + 1;
}

data-language="css"

pre {
background: #0B1022;
word-wrap: break-word;
margin: 0px;
padding: 0px;
padding: 10px;
color: #fff;
font-size: 14px;
margin-bottom: 20px;
}

pre, code {
font-family: 'Monaco', courier, monospace;
}

data-language="php"

$request = $this->oAuthRequest($this->accessTokenURL(), 'GET', $parameters);
$token = OAuthUtil::parse_parameters($request);
$this->token = new OAuthConsumer($token['oauth_token'], $token['oauth_token_secret']);

No hay comentarios:

Publicar un comentario