Tutorial SyntaxHiliter con Blogger

Hola a todos, disculpen la demora en la primer post. La verdad que es algo muy nuevo esto y quiero hacerlo bien.
Entonces me puse a pensar...que es imperiosamente necesario en un blog que trate, entre otros, temas de programación? Hacer legible el codigo! Asi fue como llegue al SyntaxHiliter.



Esta maravillosa herramienta es una verison mejorada de las funcionalidades basicas deñ HTML de comprender otras sintaxis y ahora mismo pasaremos a explicar como agregarlo a Blogger.

1. Blogger tiene dividido la parte de la cabecera de sus paginas con la parte de posts, por ello debemos entrar a editar nuestro blog, luego nos vamos a la solapa Diseño, y ahi dentro hacemos clic en Edicion HTML, ahi veremos un apartado llamado Editar Plantilla.

2. Luego debemos entrar aqui (el repositorio svn de SyntaxHiliter) y nos copiamos todo lo que encontramos ahi dentro (ctrl + a, ctrl + c), esto es basicamente el manejo de los css del plugin.

3. Terminado esto, volvemos a nuestro Editar Plantilla, y ahi aprovechamos el comando buscar de nuestro navegador para dar con el tag </b:skin> y pegamos toda la informacion del portapapeles.

4. Luego, antes del </head> debemos pegar lo siguente: (aca veremos como queda el usando el SyntaxHiliter)

<!-- Add-in CSS for syntax highlighting -->
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>

Acuerdense que pueden sacar los lenguajes que no usen para acelerar el cargado de la pagina.

5. Antes del tag </body> agregamos lo siguiente:

<!-- Add-in Script for syntax highlighting -->
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

En este punto podemos utilizar el boton Vista Previa, para ver que nuestro HTML haya quedado consistente.

Con eso quedaria configurado el SyntaxHiliter...
Y como lo usamos?

Bien, cuando creamos un post que contenga codigo:
1. Debemos entrar en la vista de Edicion de HTML.
2. Colocamos nuestro codigo dentro de estos tags:

ATENCION: Recorda que como estas dentro del formato HTML y no del editor comun, debes usar los caracteres "escapados", para evitarte dolores de cabeza, pega tu codigo en esta pagina y obtendras el resultado correcto.

<pre name="code" class="cpp">
...Your html-escaped code goes here...
</pre>

3. Reemplazamos el "cpp" por el lenguaje de nuestra eleccion. (Para la lista completa hace click aqui)

4. Voila! ya tenemos nuestro post con SyntaxHiliter y configurado para el futuro.



Que se viene en el Blog por mi parte?

Un tutorial introductorio al Maven 3.0.X
Un informe del Cloud computing y las herramientas mas usadas.
Una explicación de Patrones de Diseño, primero Factory y AbstractFactory

Saludos!