@educasitas

sábado, 26 de febrero de 2011

Syntax Highlighter 3 en Blogger

Al final no he podido evitar hacerlo ahora. Así que aquí va la solución utilizada. Todo gracias a
A Common IT Man's Blog.

La versión resumida de lo que cuenta en su blog sería:

Paso 1: Añadir las cabeceras a la plantilla

Vamos al visión HTML de nuestra plantilla y buscamos la etiqueta </head> y justo delante insertamos el siguiente código:
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css" rel="stylesheet" type="text/css"></link>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript">
 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
 
<script language='javascript' type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

Paso 2: Utilización en los artículos

Una vez hecho esto, ya podemos remarcar (esto es Sintax Hightlighting que dirían los angloparlantes) el código que queramos.

Para ello, cuando escribamos el post debemos meter el contenido dentro de un tag:

<pre class="brush: [lenguaje]" title="[Texto para el título]"> [Aqui el código que quieras añadir] </pre>


Ahora explicamos un poco los atributos que aperecen entre corchetes, el primero es el lenguaje del código que queremos introducir (yo he probado con java, js, html y sql) si quieres saber más visita la página de Syntax Hightlighter 3. El segundo atributo es el título que queramos añadir (es opcional) y que aparece al principio del código y luego el código que queramos resaltar (NOTA: hay que escapar los caracteres < por &lt; y > por &gt;).

Un ejemplo de código aquí:

public class LSDP
{
   public static void main (String [] args) throws Exception
   {
      System.out.println("Visita La Sombra del Pigmeo: lasombradelpigmeo.blogspot.com");
   }
}
Habréis visto que pudiendo elegir he elegido Java como mi lenguaje pero es que si me tengo que definir como algo (entre mis múltiples atribuciones laborales) es como programador en Java.

No hay comentarios:

Publicar un comentario