SyntaxHighlighter (I): Cómo usarlo en Blogger

ACTUALIZACIÓN: He investigado un poco y he visto que no estaba usando la configuración requerida para la última versión de esta herramienta. Corrijo el post para que no os confundáis como yo.

ACTUALIZACIÓN 2: Tengo que practicar a no publicar a lo loco XD Gracias a vuestros comentarios he descubierto nuevas funcionalidades de esta herramienta la mar de interesantes que os expondré a continuación. Todo, o casi, está documentado en la web oficial pero encontrar esas piezas es bastante complicado.

ACTUALIZACIÓN 3: Tras varios bandazos he decidido dividir este post en varias partes. La verdad es que empezaba a incumplir el Principio de Responsabilidad Única. Sí, ¡porque los blogs también pueden ser SOLID! Así que ¡es hora de refactorizar!

Parte 1: Cómo usarlo en Blogger (Lo que lees)
Parte 2: Los brushes (Próximamente)
Parte 3: Configurando y trasteando (Próximamente)

Preparando mi blog necesitaba de alguna herramienta para poder insertar código formateado. Había visto muchos otros blogs con código formateado y ¡no podía quedarme atrás! Me puse a investigar (Googlear) y encontré esta herramienta: SyntaxHighlighter. Se encuentra en esta web: http://alexgorbatchev.com/SyntaxHighlighter/.

Esta herramienta te permite convertir algo así (escrito en C#):

public class Test
{
    public int HelloKitty { get; set; }
}

En algo así:

public class Test
{
  public int HelloKitty { get; set; }
}

Otros ejemplos:

• SQL:

SELECT Id
     , Name
FROM [Property].[Properties]
WHERE IsPublished = 1

• XML:

  Tove
  Jani
  Reminder
  Don't forget me this weekend!

• JavaScript:

function myFunction() {
  var str = document.getElementById("p1").innerHTML;
  var pos = str.indexOf("locate");
  document.getElementById("demo").innerHTML = pos;
}

• CSS:

       #gallery {
           padding:0; 
           margin:0; 
           list-style-type:none; 
           overflow:hidden; 
           width:320px; 
           height:425px; 
           border:1px solid #888; 
           background:#fff url(windows/win_back.gif);
        }
        #gallery li {
           float:left;
        }
      

¿Y cómo lo meto en mi blog de Blogger?

Para poder usar esta magnífica herramienta, he tenido que modificar la plantilla maestra de Blogger. Ésta está localizada en el apartado Plantilla en la plataforma de gestión de tu blog en Blogger y, dentro de está, veréis un botón que pone Editar HTML, tal y como muestra la imagen a continuación.

Dentro del editor, justo antes del cierre del tag head, agregar el siguiente snippet:

Después, justo antes del cierre del tag body, agregar el siguiente snippet. Es importante que esté antes del cierre ya que si lo ponéis en el head no se os cargarán los estilos (¡Probado en este blog!):

Ojo con el detalle de la línea resaltada (línea nº 7). Es necesario poner el símbolo < como &lt; ya que el editor de Blogger espera texto XML y éste es su correspondiente valor. Así no os dará error de validación XML:

En el fondo, cualquier carácter que tenga versión XML es necesario ponerlo con esa codificación. Por suerte las comillas simples (') y dobles (") las transforma sólo (' pasa a ser &#39; y " pasa a ser &quot;).

¿Y como la uso en las entradas?

En el editor de las entradas como ésta, en modo HTML, escribir el código dentro de un tag pre como a continuación:

<pre class="brush: css">
       #gallery {
           padding:0;
           margin:0;
           list-style-type:none;
           overflow:hidden;
           width:320px;
           height:425px;
           border:1px solid #888;
           background:#fff url(windows/win_back.gif);
        }
        #gallery li {
           float:left;
        }
</pre>

Como podemos comprobar, en el atributo class definimos el brush que queremos que la herramienta utilice mediante el uso de un alias, en este caso css. Si quereis javascript, podéis usar js. ¿C#? c#, y así hasta todos los alias definidos en la carga de la herramienta. En este enlace(http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/) podéis encontrar todos los lenguajes que reconoce y sus alias.

Hasta aquí podéis ya juguetear con la herramienta. En la próxima parte os explicaré qué son los brushes, cómo funcionan y cómo podéis crear de propios. ¡A tope!