Nube

domingo, 18 de mayo de 2008

Añadir la etiqueta code en blogger

He tenido bastantes quebraderos de cabeza para poder agregar una formato y color a la hora de introducir códigos en el blog.

Mi primera solución fué introducir el código entre la etiqueta PRE, lo que da un resultado bastante soso.
Mi segunda opción fué codificar el código en la herramienta online SimpleCode. Pegas el código, copias la traducción y listo, pero al asunto le faltaba color.

Así que tras mucho buscar encontré syntax highlight.
Colorea, da formato y además lo hace para un amplio popurri de lenguajes.

Ejemplo:


echo "Hola Blogger";


document.write("Hola Blogger");



Instalarlo en blogger es bastante simple.
Descomprime y sube los archivos de syntax highlight a un servidor. Asegúrate de que se puedan ejecutar los archivos desde otras web para poder acceder desde nuestra plantilla blogger.
Una vez subidos añade en la plantilla de diseño (Panel de tu blog/Diseño/Edición de HTML) antes de
</body>

el siguiente código:


<link href='http://[RUTA_HASTA_EL_ARCHIVO]/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>

<script language='javascript' src='http://[RUTA_HASTA_EL_ARCHIVO]/shCore.js'/>



<script language='javascript'>

dp.SyntaxHighlighter.BloggerMode();

dp.SyntaxHighlighter.HighlightAll('code');

</script>


Añade debajo de la ruta shCore.js los idiomas que desees.
Por ejemplo para incorporar el lenguaje PHP añade:

<script language='javascript' src='http://[RUTA HASTA EL ARCHIVO]/shBrushPhp.js'/>

Para JavaScript sería :

<script language='javascript' src='http://[RUTA HASTA EL ARCHIVO]/shBrushJScript.js'/>


Ahora cada vez que desees insertar código debes introducirlo entre su etiqueta correspondiente
<pre name="code" class="Php">


Para más información tienes la wiki de Syntax Highlight

6 comentarios:

Anónimo dijo...

1000 gracias, era justo lo que necesitaba, saludos

Bondarenko dijo...

Muchas gracias por este tip.
Sin embargo en mi blog no me ha funcionado.
Deseo mostrar el codigo de un formulario pero me muestra el formulario en si.
Las ligas a sintaxhigligh estan correctas y estan correctamente agragadas a blogger.
¿Tendrás alguna idea?

Te lo agradezco de antemano

Bondarenko dijo...

Gracias Indomita. Ya encontre el error, no habia colocado los scripts en el lugar correcto, funciona precioso.

Gracias por compartir

Unknown dijo...

Todo funciona de maravilla, gracias por compartirlo.

Oscar Eduardo Alvarado dijo...

no puedo lograr que salga, que estoy haciendo mal, copie el codigo que se publico pero nada

Demiurgo dijo...

necesita subir el archivo a su servidor y poner la ruta correctamente