domingo, 9 de enero de 2011

Configurando el SyntaxHighlighter

Descargamos: SyntaxHighlighter 3.0.83, version actual. Lo cual nos dara un zip: syntaxhighlighter_3.0.83, en el cual abra 5 carpetas y 3 archivos sueltos de los cuales nos interezan:

index.html: En este solo veremos un pequeño ejemplo...

1. Carpeta scripts/: en esta el archivo shCore.js, que es el nucleo de la libreria sin esta no funciona...

2. Carpeta scripts/: A qui tenemos todas los shBrush que son pinceles, es decir, si en nuestro sitio queremos usar el SyntaxHighlighter para resaltar lenjuage C++ usaremos el archivo: shBrushCpp.js o bien Si fuese java shBrushJava.js y asi para 28 lenguajes de programacion en nuestro caso usaremos el shBrushJScript.js, para bien ya saben Javascript.

3. Carpeta: styles/shCoreRDark.css : Tema Oscuro es el que yo tengo en este blog. pero prodriamos usar cualquier otro yo recomiendo usen el que mas combine con su sitio o blog.

La siguiente seria mas o menos la configuracion en un sitio Web, pero lo necesitamos para blogger no?, bueno seguir leyendo...






/*Ojo lnk == link, blogger no me permite usar el tag link en los Post.*/

La configuracion de arriba podemos verla en un IDE para desarrollo web como Aptana, hay otros pero este es el que utilizo y me funcion bien, sin son de l@s que utilizan notepadxx, vi o similares para hacer el html, css, javascript o lo que hagan... yo no los voy ha cambiar.

Para Blogger...

Primero entramos a editar la plantila: Edicion HTML, ya lo saben no mientan!.....

Pues justo como se agrega un script en un archivo html agragamos: shCore.js, shBrushJScript.js, es decir entre las etiquetas de cabecera head. Pero usando lo siguiente y en el orden mostrado:




Lo siguiente nada mas es ejecutar un metodo global: SyntaxHighlighter.all(); y editar una propiedad llamada SyntaxHighlighter.config.bloggerMode =true;

Esto la hacemos justo despues de haber colocado los escript's : shCore.js,shBrushJScript.js de la misma forma en que colocamos estos.


Pero ahora como agregamos el tema css es decir, como hacemos que se vea bonito?: Para esto busque el tag head de cierre por que justo antes de este esta uno llamado b:template-skin que dijamos es la mascara que contiene todo el css de su plantilla a si que si necesitan cambiar algo del css del blog ya saben a done ir, no lo recomiendo es muy tedioso entretenido si pero tedioso y copien el codigo css de el tema que escogieron...

Por unltimo cada vez que en una de sus entradas necesiten utilzar esta herramienta. Coloquen su codigo entre las tags pre y con la clase css: class="brush:js;", eso seria todo... Vean codigo del archivo index.html de la carpeta que descomprimieron...


class="brush: js;"//Esta seria  la clase css que agregarian al tag html de pre