viernes, 8 de julio de 2011

Publicar Codigo Fuente en Blog

Bueno despues de buscar por muchos lugares, encontre informacion sobre como publicar codigo fuente en mi blog, la explicacion mas clara que encontre fue de este enlace en donde utiliza el plugin SyntaxHighLighter, esta informacion no es autoria mia, si no del enlace que anteriormente mencione, de todas maneras a continuacion coloco un resumen de ese articulo en español por si este desaparece.

Preambulo

Primero que todo debo explicar que SyntaxHighLighter es un excelente complemento que nos permitira dar un formato especial a nuestro codigo fuente dentro de nuestro blog autoria de Alex Gorbatchev, lo cual supongo por el nombre del dominio de la pagina origen del plugin.
Este admite diferentes sintaxis de diferentes lenguajes o bien llamadas brushes encontraremos desde xml,html,javascripts,vbNet,C#,PHP y otros, estos nos permitiran definir cual es el lenguaje que estamos formateando dentro de nuestro blog y asi poder visualizarlo como si estuvieramos directamente en nuestro IDE.

Usando SyntaxHighLighter

Antes que nada es necesario tener en cuenta que debemos reemplazar el inicio y final de los tags "<" ">" por "<" y ">" respectivamente para que no tengamos problemas con el procesador html.

1) Debemos ir a la administracion de la plantilla de nuestro blog y editar dar la opcion de edicion de HTML.

2)
Introducir el siguiente codigo despues del tag </head>

<!--SYNTAX HIGHLIGHTER BEGINS-->
<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>
<!--SYNTAX HIGHLIGHTER ENDS-->

3) Introduzca su codigo dentro de los tags

<pre class="brush:sql">
SELECT *
FROM Usuarios
WHERE Id_Usuario ='ID125';
</pre>

4) Previsualize y deberia quedar asi:

   SELECT *
     FROM Usuarios
    WHERE Id_Usuario ='ID125';

Bueno eso es todo al fin puedo colocar mas codigo de acuerdo a la sintaxis de cada lenguaje y asi podamos entedender todos mejor los ejemplos, espero que les sirva, hasta pronto