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 :)
6 comentarios:
Master cuando uno utiliza nombre de etiquetas por ejemplo .peloon en el css, ¿dónde se indica en el html?
¡Gracias!
Si tratamos una clase:
<font class="peloon">Peloon!</font>
<p class="peloon">Peloon!</p>
<img src="url" class="peloon">
Y algo que yo llamaria un identificador:
<div id="peloon">
aqui lo que quiero dentro de mi divisor
</div>
En resumen... una clase usala para dar atributos a una fuente, a un
salto de linea o a una imagen, y un divisor usalo para crear bloques de
contenidos (esto conocido como cajas), alineados, con bordes, con
fondo, etc. ojo... aqi tome en consideracion que mi clase o identificador tenian el mismo nombre "peloon" y en tu css un identificador lo pones como #peloon y una clase como .peloon
Muy buen artículo, gracias!
Acabo de comentar en la página de Scriptia la nueva dirección de mi web sobre Chili: Chili Central
Veo que estás usando la versión 1.7b, pero la más reciente es la 1.8c
Y una pequeña corrección de errata: Chili no está basado en el SyntaxHighlighter de Alex Gorbatchev, sino en el CodeHighlighter de Dan Webb (y en jQuery).
De todas formas, del CodeHighlighter ya no queda mucho tampoco...
Gracias por el dato, en un rato lo corregire, gracias por avisar ;)
hey, no me digas que chili es mas bueno que geshi.
geshi ya tiene mas de 100 leng. que resalta, incluido asm. (que no lograba encontrar en ningun otro resaltador).
de todos modos grax el dato de chili, lo voi a chekar.
saludos del ITZ Morelos. bye
Publicar un comentario en la entrada