JMiur [E]

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']);

5 comentarios:

.Sm4C.  

Muy bueno algo así buscaba :D

Responder
jal  

Acabo de conocer este sitio y me fascina. Aunque me lo estoy tomando tranquilamente, pues es nuevo ésto del blog para mi. Por lo que muestras, las posibilidades son enormes mas, me parece que es muy técnico y que requiere conocimientos previos.
Quiero agradecerte, sobre todo, que facilites el acceso de los demás a la confección de un espacio blog personalizado y completamente al gusto de cada cual.
Un saludo

JMiur  

¿La clave? Esa que escribes: tómalo con clama :D

Responder
Rosendo Ramírez Aquino  

Fabuloso para compartir codigos en nuestras entradas :D

Responder
Emanuel  

Perfecto es muy practico y resalta muy bien los codigos

Me sera útil gracias :D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR