En los blogs o sitios dedicados a la programacion o el desarrollo web es habitual encontrar montones de código. Y este código no se ve bien a menos de que este resaltado de manera correcta. Colorear el codigo facilita la visualización y por tanto la coomprension.

Gracias a las ventajas que trae el sh (syntax highliting) he decidido implementar una solucion basada en javascript, mas concretamente en jQuery. Es un plugin llamado chili, de uso relativamente sencillo (aunque su implementacion me costó un poco, pero más por mi culpa que por la del plugin).

Pasate por la web oficial de chili, y echale un vistazo, es recomendadisimo. Luego quizá haré un buen review indicando uso, instalacion, etc.

Para dar una pequeña demostración, pondré un ejemplo de código en Flex.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" initialize="init();">
<mx:Script>
<![CDATA[
public var clabRss:XML
public function init():void{
var req:URLRequest = new URLRequest("http://www.cristalab.com/rss.php");
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(req);
xmlLoader.addEventListener(Event.COMPLETE,onLoadComplete)
}
public function onLoadComplete(event:Event):void{
clabRss = XML(event.target.data);
main.title=clabRss.channel.title
posts.labelField = "title";
posts.dataProvider=clabRss.channel.item;
posts.selectedIndex=0;
titleTxt.text=clabRss.channel.item[0].title
description.text=clabRss.channel.item[0].description;
}
public function filter(evt:Event):void{
if(evt.target.text==""){
posts.dataProvider=clabRss.channel.item;
}else{
posts.dataProvider=clabRss.channel.item.(title.indexOf(evt.target.text)!=-1)
}
}
]]>
</mx:Script>
<mx:Panel id="main" width="100%" height="100%" layout="absolute">
<mx:Text y="10" text="Cargando…" fontWeight="bold" fontSize="36" id="titleTxt" height="168" left="10" right="10"/>
<mx:TextArea right="20" left="10" id="description" wordWrap="true" editable="false" bottom="75" top="150"/>
<mx:Button x="10" label="Copy Link" bottom="25" toolTip="{posts.selectedItem.link}" click="{System.setClipboard(posts.selectedItem.link)}"/>
</mx:Panel>
<mx:VBox height="100%">
<mx:Label text="Filtrar:" fontWeight="bold"/>
<mx:TextInput id="searchBox" width="100%" change="filter(event)"/>
<mx:List height="100%" id="posts" width="300" change="{titleTxt.text=posts.selectedItem.title;description.text=posts.selectedItem.description;}"></mx:List>
</mx:VBox>
</mx:Application>


y


package
{
import flash.display.*;
import flash.events.*;
import flash.ui.Keyboard;
import flash.utils.Timer;

public class Mario extends MovieClip
{
private var enMovimiento:Boolean = false;
private var temporizador:Timer = new Timer(10,0);
private var teclaPulsada:uint;
private var contendorPuntos:Sprite = new Sprite();

private var contactoConCamino_Arriba:Boolean;
private var contactoConCamino_Abajo:Boolean;
private var contactoConCamino_Izquierda:Boolean;
private var contactoConCamino_Derecha:Boolean;

public function Mario()
{
lineas.visible = false;
puntos.visible = false;
stage.addEventListener(KeyboardEvent.KEY_DOWN,tecla);
temporizador.addEventListener(TimerEvent.TIMER,mover);
}
private function tecla(e:KeyboardEvent):void
{
if (enMovimiento == false) {
this.contactoConCamino_Arriba= false;
this.contactoConCamino_Abajo= false;
this.contactoConCamino_Izquierda= false;
this.contactoConCamino_Derecha= false;

teclaPulsada = e.keyCode;
palparCaminos();
temporizador.start();
enMovimiento = true;
}

}
private function mover(e:TimerEvent):void
{

var velocidad:uint = 2;

if (teclaPulsada == 39 && this.contactoConCamino_Derecha == true) // 39 es RIGHT
{
mario.x += velocidad;
}
if (teclaPulsada == 37 && this.contactoConCamino_Izquierda== true) // 37 es LEFT
{
mario.x -= velocidad;
}
if (teclaPulsada == 38 && this.contactoConCamino_Arriba == true) // 39 es UP
{
mario.y -= velocidad;
}
if (teclaPulsada == 40 && this.contactoConCamino_Abajo== true) // 40 es DOWN
{
mario.y += velocidad;
}

for (var i:uint = 0; i <= puntos.numChildren-1; i++) {
// En el mc llamado mario hay un MC llamado centro que sirve como detector..
// ... de coliciones
// Si centro coliciona con cualquier punto se detiene
if (mario.centro.hitTestObject(puntos.getChildAt(i)) == true) {
temporizador.stop();
enMovimiento = false;
}
}
}
// Funcion que le indica a Mario, que caminos puede cojer
// Mas tecnico. Dependiendo de que lineas tenga arriba, abajo, derecha o izquierda...
// ...se podra mover en una direccion
// En el MC llamado mario hay 4 MC que sirven como vigotes de un gato, para saber..
// que lineas tiene cerca

private function palparCaminos():void
{
for (var i:uint = 0; i <= lineas.numChildren-1; i++) {
if (mario.arriba.hitTestObject(lineas.getChildAt(i)) == true) {
this.contactoConCamino_Arriba= true;
}
if (mario.abajo.hitTestObject(lineas.getChildAt(i)) == true) {
this.contactoConCamino_Abajo= true;
}
if (mario.izquierda.hitTestObject(lineas.getChildAt(i)) == true) {
this.contactoConCamino_Izquierda= true;
}
if (mario.derecha.hitTestObject(lineas.getChildAt(i)) == true) {
this.contactoConCamino_Derecha= true;
}
}
}
}
}


No siendo más… hasta otra