Buscar en este blog....

sábado, 9 de abril de 2011

Colorear código fuente en Bolgger con "Syntax HighLighter"

Esto si que me costo encontrarlo, y mas aun hacerlo funcionar. ¿Por que? Porque en la mayoria de las web esta mal explicado, como en esta.

Luego encontré cómo se configura blogger para que realmente funcione esto: es muy facil. Lo pasos son los siguientes:

1º) Modificamos la plantilla de Blogger.
Para esto vamos a Diseño -> Edición de HTML. Ahi buscamos la etiqueta </head>. Y justo una linea encima de esta agregamos el siguiente código:


<!--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-->


2º) Verificar si todo anduvo bien haciendo click en "Ver Blog".

3º) Agregar el código fuente que quieras.
Para esto, cuando estamos editando una entrada, tenemos que hacer click en la pestaña que dice "Edicion de HTML" y ahi agregar las siguientes líneas:


<pre class="brush:java">
Aca va tu codigo en java
</pre>


Donde dice java, ponen el lenguaje que esten usando. Para ver una lista de lenguajes disponibles y como se nombran, vean este link.

Por ultimo, me gustaria recalcar algo. Conviene formatear el codigo fuente, al final de la edición del post, ya que si se hace cambiando el tipo de edición (de "Edicion de HTML" a "Redactar") se pierde el formato de saltos de lineas y espaciados del codigo fuente. Por lo tanto, recomiendo escribir el post completo, y al final poner todo el código fuente que se quiera.

Saludos!

8 comentarios:

  1. Muy buen aporte amigo. Justo lo que estaba buscando

    ResponderEliminar
  2. Perfecto, es lo que necesitaba, ni más ni menos, y encima perfectamente explicado. Un saludo y gracias por el aporte.

    ResponderEliminar
  3. Gracias Bro, justamente buscaba si se podia implementar Syntax HighLighter en Blogger, Gracias!

    ResponderEliminar
  4. si por fin un buen tutorial me sirvió
    mucho, muchas gracias amigo sigue asi.

    ResponderEliminar
  5. Hola,

    Yo lo vi ayer y quise ponerlo a mi blog, y cuando lo puse no me gustó y lo quite. Primero, lo de los colores y demás es muy interesante, pero las desventajas que he visto son: una, que las líneas del código no se enumeran correctamente. Dos, la etiqueta ocupa más que el código en sí si él es largo, y si no, fíjate en tu código de la primera etiqueta, el espacio que te ha dejado después. Y tercero lo más importante, la página tuya tarda un montón en cargar cuando lo pones. Está claro que si cambias de dominio puede que lo soluciones... pero a mí no me va bien.

    ¿Conoces alguna otra alternativa?

    ResponderEliminar
  6. Gracias me ha servido tu publicación, lo he implementado en mi blog

    while-java.blogspot.mx

    ResponderEliminar
  7. ¡Vaya! Año 2013 y esto sigue vigente. Muy bueno; solo que hay un inconveniente.
    Cuando uso mi código en Java, en la edición de HTML me genera un error al usar el signo de "Mayor que / Menor que" diciendo que no se ha cerrado una etiqueta.
    Por lo menos está bueno. SI calificara con estrellas (Como la play store) tendría 4. Solo tiene ese detalle. No sé como solucionarlo hasta ahora que tengo 12 minutos probándolo.
    ¡Buen código!
    - - - - -
    Solucionado: Solo pongan espacio en lo siguiente.

    a < condición
    si ponen junto genera error.
    ¡Que simpleza! Pero es verdad.

    ResponderEliminar

Comments are subject to moderation, only in order to avoid insults and disguising things.

Los comentarios están sujetos a moderación, solo con el fin de evitar insultos y cosas por el estilo.