viernes, 28 de agosto de 2009

Agregando coloreado de sintaxis en blogspot

Luego de escribir el post anterior me encontré con la necesidad de agregar coloreado de sintaxis y números de linea al código fuente Python.
Probe varias posibilidades como simplecode (es para codigo html, y no pone numeros de linea) pero ninguno me maravillo. En el canal de Chat de PyAr (#pyar en freenode) me pasaron el link a un post en webresourcesdepot.com donde sugiere 11 opciones para resaltar la sintaxis. La primera opcion es usar Geshi (el que usan en wikipedia) pero no es facil de integrar en blogger.

La segunda opcion es SyntaxHighlighter, desarrollado en javascript por Alex Gorbatchev.
Su integracion en blogger es muy sencilla y la explicare a continuación:

  • Nos logeamos en nuestra cuenta de blogspot y vamos, dentro de la pestaña "Diseño" a la opción "Edicion HTML". El documento en cuestion es el "esqueleto" de nuestro blog.
  • Lo recomendable en este paso es guardar la plantilla en nuestra pc, para tener un backup, en caso de cometamos algun error en la edición
  • Buscamos la etiqueta </head> y a continacion pegamos lo siguiente


  • <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"><br /><!-- add brushes here --><br /><script type="'text/javascript'"><br /> SyntaxHighlighter.config.bloggerMode = true;<br /> SyntaxHighlighter.all();<br /></script>


  • Despues del comentario donde dice "add brushes here" pegamos las llamadas a los lenguajes que queremos tener habilitados para colorear (conviene poner los menos posibles, para no ralentizar la carga de las paginas)


<!--Colorea AS3-->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/>
<!--Colorea Bash-->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<!--Colorea CSharp-->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<!--Colorea Cpp-->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<!--Colorea Css-->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<!--Colorea Delphi-->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'/>
<!--Colorea Diff-->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/>
<!--Colorea Groovy-->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'/>
<!--Colorea JScript-->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<!--Colorea Java-->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<!--Colorea JavaFX-->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/>
<!--Colorea Perl-->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<!--Colorea Php-->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<!--Colorea Plain-->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<!--Colorea PowerShell-->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/>
<!--Colorea Python-->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<!--Colorea Ruby-->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<!--Colorea Scala-->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>
<!--Colorea Sql-->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<!--Colorea Vb-->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<!--Colorea Xml-->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>


Para utilizarlo usamos:

<pre class="brush:lenguaje">

Ponemos nuestro codigo aqui

</pre>


Donde "lenguaje" es el alias del lenguaje que estamos usando aqui esta la lista completa de alias

Nota: si queremos pegar codigo html hay que codificarlo primero con simplecode

No hay comentarios.: