24/9/10

Agregar formato a código de programación en un post dentro de Blogger

Después de tres post y cuando estaba en la creación del cuarto me di cuenta que mis códigos escritos en csharp (C#) y en XAML no eran legibles y de poco me iban a servir más adelante cuando necesitara de ellos, por lo que me vi en la necesidad de buscar un script que me permitiera darle formato al código de manera fácil y rápida.

La solución fue simple pero lenta porque no encontraba una que pudiera ayudarme con una gran variedad de lenguajes (espero en este Blog escribir en varios lenguajes de programación), además necesitaba que la solución aplicara para Blogger y no tuviera que instalar nada en el servidor, finalmente la solución es la siguiente:

1. Entrar a Blogger con tu cuenta.
2. ir a la sección de Diseño
3. Seleccionar la opción de Edición de HTML
4. Activar la opción: Expandir plantillas de artilugios.
5. Visitar la página:  http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css   y copiar todo el texto.
6. En el código de la plantilla de tu blog buscar la siguiente cadena: ]]--></b:skin>
7. Pegar el texto de la página antes de la cadena ]]]--></b:skin>
8. Luego buscar la cadena: </head> y antes de la cadena pegar lo siguiente:

<!-- Add-in CSS for syntax highlighting -->
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>

9. Buscar la cadena: </body> y antes de la cadena pegar el siguiente texto:

<!-- Add-in Script for syntax highlighting -->
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>


10. Guarda la plantilla.

11. Ahora para publicar un post en el blog, se debe editar como HTML y colocar las siguientes etiquetas:

<pre name="code" class="java">


Aquí va el código


</pre>

12. Se puede configurar el lenguaje de programación para lo cual hay que sustituir la palabra java por alguna de las siguientes:
  • C++  se escribe cpp, c, c++
  • C#  se escribe    c#, c-sharp, csharp
  • CSS  se escribe  css
  • Delphi se escribe delphi, pascal
  • Java    se escribe       java
  • Java Script se escribe js, jscript, javascript
  • PHP se escribe  php
  • Python se escribe py, python
  • Ruby se escribe rb, ruby, rails, ror
  • Sql se escribe sql
  • VB se escribe vb, vb.net
  • XML/HTML se escribe xml, html, xhtml, xslt

Listo es todo.

No hay comentarios: