Navegando por la red, me topé con este sitio Scriptia.net el cual habla de un resaltador de sintaxis llamado Chili,y es bastante facil configurarlo ;) aquí trataré de explicar como configurarlo.
Es importante mencionar que se han hecho pruebas con otros resaltadores de sintaxis, unos aparantemente muy buenos como: syntaxHighlighter de google o Geshi o simplemente usar las clases para mostrar codigo coloreado que maneja PHP, pero como no siempre podemos disponer de las maravillas que nos ofrece este lenguaje tenemos que acoplarnos y la verdad... Chili que está basado en CodeHighlighter de Dan Webb y en jQuery., es muchisimo más ligero y facil de utilizar, aunque tambien mas simple.
Pues bien... pasando a las instalacion y publicación:
1. Lo que haremos primeramente es descargar alguna versión de el resaltador Chilli, en este caso utilizaremos la: Chili 1.7b
2. Una vez descargado debemos extraer los archivos en algun directorio, de preferencia algo fácil encontrar, puede ser en el Escritorio de Windows, o en el Desktop de Linux, en este caso usaremos: Desktop > Chili y al extraer el contenido de nuestro archivo ZIP, nos toparemos con los siguientes archivos:
- chili-1.7b.pack.js
- jquery-1.1.2.pack.js
- metaobjects-1.3.js
- recipes.css
- recipes.js
y los mandaremos llamar desde nuestro archivo donde querramos mostrar codigo resaltado, en este caso lo incluiré en el HTML de mi plantilla blogger, estos codigos entre las etiquetas <head> </head> :
<link href='recipes.css' rel='stylesheet'type='text/css'/>
<script src='jquery-1.1.2.pack.js'type='text/javascript'/>
<script src='chili-1.7b.pack.js' type='text/javascript'/>
<script src='etaobjects-1.3.js' type='text/javascript'/>
<script src='recipes.js' type='text/javascript'/>
De prefererencia ponerlo justo una linea antes de: </head>
y para finalizar la manera de utilizarla es la siguiente:
<pre><code class="lenguaje_a_colorizar">
<!-- Aqui nuestro codigo para colorizar-->
</code></pre>
Cabe mencionar que el codigo del archivo: recipes.css puede ser personalizado a nuestro gusto, para crear los resaltados con los colores de nuestro gusto ;)
y como "hack" o personalizacion extram podemos agregar codigo a nuestra hoja de estilos, en mi caso agregue esta clase:
pre{
width: 460;
margin-top: 0px;
margin-left: 15px;
margin-right: 0px;
margin-bottom: 0px;
padding: 4px;
border: 1px solid;
border-color: #B0CAFF;
background-color: #ECF2FF;
}
rapidamente les digo.. me di cuenta que se utilizaban las etiquetas: <pre> y </pre> y con poquitos conocimientos que tengo de CSS, me di cuenta que podia personalizar esa etiqueta, y es como aparece mi codigo aquí dentro de recuadros azules ;)
Por último puedo decir que si se mira el codigo de los archivos de ejemplo: examples-static ó examples-dynamic, se puede ver un poquito más la manera de como utilizar este resaltador.
Cualquier duda... solo comenten :) Nota: Gracias a Andrea, por tomarse las molestias de realizar los comentarios pertinentes :)
