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>
// 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:
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}
0 comentarios:
Publicar un comentario