JMiur [E]

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>:
<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>
// un ejemplo de JavaScript
function algo(dato) {
var salida;
if(dato<100) {
salida = "menor que 100" ;
} else {
salida = "mayor que 100" ;
}
return salida;
}
document.write(algo(dato));
/** Un ejemplo de CSS */
html {
content-before: 'hello\20';
-moz-spiff: inherit !important;
}
body {
margin-bottom: 4px;
margin-left: 3in;
margin-bottom: 0;
margin-top: 5%;
}
table a#visited {
color: #012 !important;
font-family: "monospace";
}
Si bien no es necesario agregar el lenguaje, puede hacerse incluyéndolo en la clase, por ejemplo:
<pre class="prettyprint lang-html">
.......
</pre>
<!-- un ejemplo de HTML -->
<head>
<title> Mi SItio </title>
<style>
body { background-color: #FFF }
</style>
<script src="unScript.js"></script>
</head>

No numera las líneas de manera automática pero esta puede agregarse manualmente especificando la clase nocode de este modo:
<pre class=prettyprint>
<span class="nocode">1:</span> // una línea de código
<span class="nocode">2:</span> // otra línea de código
</pre>
1: <?php
2: // un ejemplo de PHP
3: function alguna($dato) {
4: if($dato<100) {
5: $salida = "menor que 100" ;
6: } else {
7: $salida = "mayor que 100" ;
8: }
9: echo $salida;
10: ?>

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

La hormiguita  

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

Responder
JMiur  

Recién veo tu mail. Debe haber sido un problema circunstancial de Blogger pero igual, gracias por el aviso :D

Responder
Graciela  

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

Responder
JMiur  

Ah es que esto sólo es interensate para quienes debemos escribir códigos en las entradas, sino, carece de sentido :D

Responder
Nico  

Se ve bueno. Nunca he usado este tipo de cosas. Recomendás esto en Wordpress o conoces algo mejor?

Responder
JMiur  

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.

Responder
Karla  

Hola JMiur

Algún sitio que sepas que lo usa para ver como funciona...

Gracias

Responder
JMiur  

En este post hesta funcionando el script y hay demos. El resto, puedes verlo en lso enlaces que acompañan la entrada.

Responder
Karla  

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.

Responder
JMiur  

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 :-)

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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

 
CERRAR