Este proyecto iniciado en 2004 a ganado ya mucha aceptación y recientemente, a inicios de este mes (Feb. 2009) a lanzado su nueva versión: SyntaxHighlighter 2.0. De acuerdo al sitio oficial del proyecto la versión 2.0 representa una renovación casi completa (código reescrito, limpieza, optimización, estandarización y nuevas características).
Existe un post (en ingles) sobre como usar dicha librería javascript en blogger, aunque este post data de Agosto de 2007 es una buena referencia, aquellos que lo deseen lo pueden revisar en el siguiente enlace: http://developertips.blogspot.com/2007/08/syntaxhighlighter-on-blogger.html
A continuación los pasos necesarios:
1. Descargamos SyntaxHighlighter aquí y buscamos un buen servidor donde guardar los archivos incluidos en la librería.
2. Ingresamos en BLOGGER, y editamos nuestra plantilla: "Personalizar > Diseño > Edición de HTML", yo de paso aproveché para dar una nueva imagen a mi blog. :-)
Modificamos el header de la plantilla como sigue:
<!--syntaxHishlighter begin--> <link href="http://[HOST_SITE]/shCore.css" rel="stylesheet" type="text/css"> <link href="http://[HOST_SITE]/shThemeDefault.css" rel="stylesheet" type="text/css"> <script src="http://[HOST_SITE]/shCore.js" type="text/javascript"> <script src="http://[HOST_SITE]/shBrushCpp.js" type="text/javascript"> <script src="http://[HOST_SITE]/shBrushCSharp.js" type="text/javascript"> <script src="http://[HOST_SITE]/shBrushCss.js" type="text/javascript"> <script src="http://[HOST_SITE]/shBrushJava.js" type="text/javascript"> <script src="http://[HOST_SITE]/shBrushJScript.js" type="text/javascript"> <script src="http://[HOST_SITE]/shBrushSql.js" type="text/javascript"> <script src="http://[HOST_SITE]/shBrushXml.js" type="text/javascript"> <script type="text/javascript"> SyntaxHighlighter.config.bloggerMode=true; SyntaxHighlighter.config.ClipboardSwf = "http://[HOST_SITE]/clipboard.swf"; SyntaxHighlighter.all(); </script> <!--syntaxHishlighter end-->Aquí es importante resaltar que la configuración SyntaxHighlighter.config.bloggerMode es necesario para que todo funcione correctamente en Blogger.
3. Ahora cada fragmento de código que deseemos resaltar lo colocamos dentro un tag <pre>, por ejemplo:
<pre class="brush: js; html-script: true; auto-links: false">
alert("hola mundo!");
</pre>
Con esta está ya todo listo.Saludos.
Actualización: Google Page Creator será reemplazado por Google Site y ya no es una buena opción para guardar los archivos necesarios para usar el SyntaxHighlighter.
Actualización 02/01/2011: Al parecer la opción light:true hacía que no se cargaran los controles para copiar el código de ejemplo por lo que la quité :).
Excelente ayuda, ¡gracias!
ResponderEliminarPor nada Jaime, espero que te sea de ayuda.
ResponderEliminarSaludos.
Hola que tal, ya modifiqué la plantilla, pero cuando pongo el código ¿Cómo especifico que lenguaje de programación voy a manejar?
ResponderEliminarY pongo el código entre pre /pre pero no se parece nada a tu ejemplo.
Y otra cosita, ¿sabras como ponerle scroll?
Saludos.
Holla ChXt0,
ResponderEliminarSe me pasó colocar el tag pre completo ¡gracias por notarlo!.
He editado el post, básicamente debes color al tag pre en el atributo class, brush: seguido de la sintaxis que deseas usar, en el ejemplo js (javascript).
Para más detalles consulta el manual del syntaxhiglighter: http://alexgorbatchev.com/wiki/SyntaxHighlighter:Usage
Para el scroll puedes usar un div y css, por ejemplo div style="overflow:scroll".
http://www.w3schools.com/Css/pr_pos_overflow.asp
Saludos.
Muchas gracias por la respuesta, ya pude que el código se vea como el tuyo.
ResponderEliminarYa abusando, otra pregunta, ¿Cómo le hiciste para que tu plantilla utilive todo el ancho de la página?, ves que las plantillas que vienen son angostas y se amontona lo que escribes.
Saludos.
Hola ChXt0,
ResponderEliminarNo hay problema por tu pregunta.
Usando gimp, firebug, un editor de texto y con algo de inspiración modifiqué las imágenes y el css de la plantilla.
Saludos.
Muchas gracias, justo me faltaba el SyntaxHighlighter.config.bloggerMode=true; para que funcionara.
ResponderEliminarSaludos.
amigo muy buena tu explicación de verdad que me es de mucha ayuda ya que encontré la pagina en ingles, ahora tengo ciertas dudas, a cual servidor tendria que subir los archivos?, y se suben todos al mismop tiempor no tengo que redireccionar uno hacia el otro, gracias por la ayuda
ResponderEliminarhttp://agentemello007.blogspot.com
xAnDrEsx,
ResponderEliminarEl servidor al que subas los archivos depende de ti.
Lo más recomendable es que subas todos los archivos al servidor que elijas.
No comprendo a que te refieres con "redireccionar uno hacia el otro", pero con que sigas los pasos que indico todo debe funcionar bien.