Google Code Pretiffy es un profecto alojado en Google Codes que permite que formateemos códigos.
A diferencia de muchos otros sistemas que requieren que usemos un servidor propio o PHP, este funciona en cualquier página web y para eso, basta agregar un script y el CSS que podemos descargar desde el mismo sitio del desarrollador.
Soporta muchos lenguajes: C/C++, Java, Python, Ruby, PHP, VisualBasic, SQL, HTML, XML, CSS, JavaScript, etc. La lista completa con ejemplos puede ser revisada en esta página y lo más interesante es que la detección es automática, es decir, no es necesario especificar el idioma.
Todo lo que debemos hacer es agregar ambos archivos antes de </head>:
A diferencia de muchos otros sistemas que requieren que usemos un servidor propio o PHP, este funciona en cualquier página web y para eso, basta agregar un script y el CSS que podemos descargar desde el mismo sitio del desarrollador.
Soporta muchos lenguajes: C/C++, Java, Python, Ruby, PHP, VisualBasic, SQL, HTML, XML, CSS, JavaScript, etc. La lista completa con ejemplos puede ser revisada en esta página y lo más interesante es que la detección es automática, es decir, no es necesario especificar el idioma.
Todo lo que debemos hacer es agregar ambos archivos antes de </head>:
<style type="text/css" src="URL_prettify.css"></style> <script type="text/javascript" src="URL_prettify.js"></script>
Y luego, agregar la llamada a la función, ya sea en la etiqueta BODY:
<body onload="prettyPrint()">
o con un script:
<script type="text/javascript"> window.onload = prettyPrint(); </script>
De aquí en adelante, lo usamos agregando la clase prettyprint a cualquier etiqueta PRE o CODE:
<pre class="prettyprint"> ....... </pre>
Lo mejor, para personalizar el script es agregar el CSS directamente en la plantilla y editarlo, cambiando los colores y otros formatos para adecuarlo a nuestro sitio.
Las definiciones elementales son estas:
Las definiciones elementales son estas:
pre.prettyprint {
/*
esto define el rectángulo de la etiqueta y es donde podemos estabelcer colores de fondo, bordes, márgenes,
así como ambiñén las fuentes de los textos y sus tamaños
creo que también debería incluir:
white-space:pre-wrap;
para evitar que las líneas excedan el ancho disponible
*/
}
/* todas las demás, son los colores de las diferentes partes y habrá que descubirlas por ejemplo: */
.pln {color: #000} /* el color base */
.str {color: #080}
.kwd {color: #008} /* las funciones */
.com {color: #800} /* los comentarios */
.typ {color: #606}
.lit {color: #066} /* los datos */
.pun {color: #660} /* los símbolos */
.tag {color: #008} /* las etiquetas */
.atn {color: #606} /* los atributos */
.atv {color: #080} /* los valores de los atributos */
.dec {color: #606}
10 comentarios:
Recién termino de escribirte y cuando vuelvo a la página ya bajo... esta todo bien... y eso que probé varias veces y en el explorer... decía listo, como que no habia más para bajar.Gracias
Recién veo tu mail. Debe haber sido un problema circunstancial de Blogger pero igual, gracias por el aviso :D
Petrific vengo quedando por no entender jajaja.
Entre el juego que no se deja, un poco de cansancio y no enteder, soy una estatua de hielo en Toronto :P
Ah es que esto sólo es interensate para quienes debemos escribir códigos en las entradas, sino, carece de sentido :D
Se ve bueno. Nunca he usado este tipo de cosas. Recomendás esto en Wordpress o conoces algo mejor?
En WordPress vengo usando otro, un pligin llamado iG:Syntax Hiliter; un poco engorroso, tuve que modificarlo bastante.
Este, me gustó mucho y ando con ganas de cambiarlo, me parece más simple y más sencillo de adaptar.
Hola JMiur
Algún sitio que sepas que lo usa para ver como funciona...
Gracias
En este post hesta funcionando el script y hay demos. El resto, puedes verlo en lso enlaces que acompañan la entrada.
Bueno, en realidad lo que me interesa es la finción de copiar el código de manera mas práctica para el usuario, ya que quiero incluir los códigos de la plantillas en las entradas, es por eso que me gusto el funcionamiento de SyntaxHighlighter.
Vi otra forma de mostrar los códigos que se ve muy elegante, la usan en la página de el maestro del ocio, para visualizar y copiar el código de los layouts para myspace:
http://www.elmaestrodelocio.com/ml/
¿Conoces algo parecido?
Y si lo sabes sería bueno que te aventaras un tutorial, :D sería genial.
:D Gracias Maestro te agradezco el tiempo.
El sitio que muestras utiliza un servicio llamado Gygya. Desconozco como funciona ese servicio.
Tener un botón para copiar y pegar en Internet Explorer es simple pero, en Firefox es muy complicado ya que el navegador tiene restricciones de seguridad que lo impiden así que hay algunos trucos para resolver eso pero son demasiado engorrosos. Si buscas en Google verás decenas de artículos que hablan de ese problema con soluciones diversas que suelen no funcionar :-)
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...