Añadiendo colorines al código fuente en Blogger

Como se acercan las vacaciones he tratado de remodelar el diseño del blog tratando de quitar todo aquello que lo ralentiza y añadiendo algunas funcionalidades nuevas como la coementada en el anterior post. Ya introducidos en el reino del JavaScript me he encontrado con la posibilidad de resaltar el código fuente mediante una libreria en JS SyntaxHighlighter que nos permite colorear el codigo fuente de diversos lenguajes de programación.

Lenguages	Alias
C++	cpp, c, c++
C#	c#, c-sharp, csharp
CSS	css
Delphi	delphi, pascal
Java	java
Java Script	js, jscript, javascript
PHP	php
Python	py, python
Ruby	rb, ruby, rails, ror
Sql	sql
VB	vb, vb.net
XML/HTML	xml, html, xhtml, xslt

Para habilitar esta carateristica lo primero que deberemos hacer, como es normal, es descargarnos los ficheros que comprenden esta aplicación en Javascript desde SyntaxHighlighter. Una vez hecho esto los tendremos que alojar en algún servidor accesible para a continuación editar nuestra plantilla Blogger: Settings > Template > Edit HTML realizando los siguientes cambios inmediatamente antes de la etiqueta /BODY: No debemos olvidar antes de postear nuestro código en html cambiar los carácteres < por <, y > con >; para que blogger no interprete los saltos de linea como un retorno de carro ya que esto aparecería en el códgio resaltado y en la oción de ver el mismo en texto plano.

<link href='http://evaristogestoso.googlepages.com/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>

<script src='http://evaristogestoso.googlepages.com/shCore.js' type='text/javascript'/>
<script src='http://evaristogestoso.googlepages.com/shBrushCpp.js' type='text/javascript'/>
<script src='http://evaristogestoso.googlepages.com/shBrushCSharp.js' type='text/javascript'/>
<script src='http://evaristogestoso.googlepages.com/shBrushCss.js' type='text/javascript'/>
<script src='http://evaristogestoso.googlepages.com/shBrushJava.js' type='text/javascript'/>
<script src='http://evaristogestoso.googlepages.com/shBrushJScript.js' type='text/javascript'/>
<script src='http://evaristogestoso.googlepages.com/shBrushSql.js' type='text/javascript'/>
<script src='http://evaristogestoso.googlepages.com/shBrushXml.js' type='text/javascript'/>
<script src='http://evaristogestoso.googlepages.com/shBrushRuby.js' type='text/javascript'/>

<script class='javascript'>
//<![CDATA[
function FindTagsByName(container, name, Tag)
{
    var elements = document.getElementsByTagName(Tag);
    for (var i = 0; i < elements.length; i++)
    {
        if (elements[i].getAttribute("name") == name)
        {
            container.push(elements[i]);
        }
    }
}
var elements = [];
FindTagsByName(elements, "code", "pre");
FindTagsByName(elements, "code", "textarea");

for(var i=0; i < elements.length; i++) {
if(elements[i].nodeName.toUpperCase() == "TEXTAREA") {
var childNode = elements[i].childNodes[0];
var newNode = document.createTextNode(childNode.nodeValue.replace(/<br\s*\/?>/gi,''));
elements[i].replaceChild(newNode, childNode);

}
else if(elements[i].nodeName.toUpperCase() == "PRE") {
brs = elements[i].getElementsByTagName("br");
for(var j = 0, brLength = brs.length; j < brLength; j++) {
var newNode = document.createTextNode("");
elements[i].replaceChild(newNode, brs[0]);
}
}
}
//clipboard does not work well, no line breaks
// dp.SyntaxHighlighter.ClipboardSwf =
//"http://evaristogestoso.googlepages.com/clipboard.swf";
dp.SyntaxHighlighter.HighlightAll("code");
//]]>

</script>

Otra manera menos complicada pasa por instalar un widget con todos los archivos comprimidos en el mismo para su funcionamiento en blogger que podemos encontrar aqui FaziBear: Blogger Syntax Highlighter. Bueno una característica más que güay y que nos puede dar mucho juego para futuros post y la única forma existente cuando el blog no lo tenemos en nuestro propio servidor. Sería interesante ver el código para incorporar algún lenguaje más, en este sentido pienso en los ficheros Map de Mapserver.

La verdad que es una carácterística más que interesante, y ya que hemos incorporado a la plantilla la posibilidad de añadir mapas de Google pasamos a describir la forma de hacerlo.

1. La consabida edición del código HTML de la plantilla despues del tag HEAD e introducir:

<style type="text/css"> v\:* { behavior:url(#default#VML); } </style> <script language="javascript" type="text/javascript"> window.onload=create_map;    function create_map() { if  (document.getElementById("google_map") != null) map_details();} </script>

2. Una vez hecho esto ya podemos postear incluyendo lo Gmaps sin iframes
habilitando las caracteristicas que creamos necesarias y usando GGeoXml para incluir archivos en KML, Georss, etc .

 <script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAASk3wHKQ_sC0w9rgXGvLcRRTHqjIP8ruz5WgLFA0TbzPo8JUt8xRWtWVFMHWUaT5czKaped8Tqk4z1g" type="text/javascript"></script><script type="text/javascript"> function map_details() { var geoXml = new GGeoXml("http://arkegeomatica.es/GeoWeb/castros.kmz"); var map = new GMap2(document.getElementById("google_map")); map.addControl(new GSmallMapControl());map.enableScrollWheelZoom();map.addMapType(G_SATELLITE_3D_MAP);map.addControl(new GMapTypeControl());map.setCenter(new GLatLng(41.872042,-6.30006), 8);map.addOverlay(geoXml);}</script>

3. Por último añádir una etiqueta div para dar la dimensión que deseemos al mapa

<div id="google_map" style="width: 650px; height: 400px;"></div>

Obteniendo como resultado