16 de julio de 2012

Publicar codigo formateado en Blogger

Etiquetas:
Blogger es un útil servicio de Blog para publicar tu contenido. Sin embargo, al momento de escribir ya sea código PHP, JavaScript, MySQL o algún otro lenguaje, no disponemos de facilidades directas para formatear (destacado de sintaxis) debidamente nuestro código fuente.
Frente a este problema nos viene al rescate el recurso llamado "syntaxhighlighter". Esta utilería, Syntaxhighlighter esta formada por un grupo de archivos Javascript y archivos de estilo CSS, que podemos enlazar desde la propia plantilla de Blogger para proveer de estilo al código fuente.


Procedimiento para destacado de Sintaxis de Código en Blogger


El procedimiento consiste en los siguientes pasos:
  1. Ir a la plantilla del Blog y hacer clic en "Editar HTML".
  2. Dentro del entorno de Edición de Plantilla de Blogger, agregar el siguiente código antes de la etiqueda </HEAD> del HTML:

    <link href="http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css" rel="stylesheet" type="text/css"></link> 

<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js"/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js'/>


    Se pueden agregar enlaces al resto de los archivos Javascript, para dar soporte a otros lenguajes.
  3. Incluir dentro de la misma cabecera, pero antes del Javascript y justo antes de "]]>" el contenido del archivo CSS http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css.
  4. Ahora se requiere darle al código Javascript la posibilidad de ejecutarlo, para tal efecto incluya en la misma plantilla HTML, agregando el siguiente código antes de la etiqueta </BODY> : 

    <script language="javascript">
dp.SyntaxHighlighter.BloggerMode(); 
dp.SyntaxHighlighter.HighlightAll('code');
</script>
Eso es todo el proceso para dejar a nuestro Blog en Blogger habilitado para que destaque la sintaxis del código fuente. Ahora la forma de incluir nuestro código es usar la etiqueta <pre> del HTML del siguiente modo:
<pre name="code" class="Cpp">
  ... Aquí va nuestro código fuente...
</pre>

Por último, al insertar nuestro código fuente debemos usar una transcripción a entidades HTML de modo de evitar una interpretación del navegador, este proceso es muy sencillo usando el servicio online que ya realiza esta labor: http://www.string-functions.com/htmlencode.aspx

Eso es todo!

Fuentes:

https://code.google.com/p/syntaxhighlighter/
http://blog.eviac.com/2010/11/publish-source-code-in-blogger-using.html
http://urenjoy.blogspot.com/2008/10/publish-source-code-in-blogger.html

loading..