martes, 12 de marzo de 2013

Formatear código fuente con colores en Blogger

A los que están partiendo con Blogger (como este humilde blog) y quieren escribir código fuente, les resultará frustrante al comienzo no saber como formatear con colores y toda la parafernalia ya que no está la opción simple de formatear código. Así que investigando, hay varios métodos, entre esos este me pareció fácil de explicar.

Nota: los cambios de formato de código que hagas en Blogger, se ven al momento de Publicar, en modo Vista Previa, no se ven correctamente.

1. Gracias la gran librería SyntaxHighlighter se debe copiar estas líneas en el Template/Plantilla de tu Blog, en modo HTML, justo arriba del tag head:

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

2. Ahora puedes probar el nuevo juguete. En modo HTML ahora puedes colorear csharp así podrías escribir por ejemplo:

<pre class="brush: csharp">
using System;

namespace ConsoleApplication1
{
    class Test
    {
        public void TestColores(string valor)
        {
            // código
        }
    }
}
</pre>

Ahora usas el tag Pre y además si te fijas usamos una pintada de brush: csharp para pintare en lenguaje CSharp, pero igualmente puedes usar brush: java para pintar en lenguaje Java. Hay un gran números de tipos de formatos posibles.

El código anterior generará la salida en colores (yeah!):

using System;

namespace ConsoleApplication1
{
    class Test
    {
        public void TestColores(string valor)
        {
            // código
        }
    }
}

Para colorear código xml escribes:

<pre class="brush: xml">
<forms
name=".ASPXAUTH"
enableCrossAppRedirects="false">
<credentials passwordFormat="SHA1" />
</forms>
</pre>

Te muestra:

Cuando pintas XML, los atributos te quedan en una sola línea, si buscas en Internet hay alternativas para dejarlo en varias líneas.

Para colorear una línea o párrafo de otro color:

<span style="color:red">
Event code: 4005
<br>
Event message: Forms authentication failed for the request. Reason: The ticket supplied has expired.
</span>

Te muestra:

Event code: 4005
Event message: Forms authentication failed for the request. Reason: The ticket supplied has expired.


 Referencias


Publicado por en
Etiquetas: