Sigueme por RSS! RSS

Google Code Prettify


Ya quisiéramos lo que hemos probado  GeShi (Generic Syntax Highlighteren) poder usarlo con Blogger..

¿GeShi en Blogger? si, el inconveniente es que el primero trabaja con PHP y el segundo no permite ejecutarlo, vaya gracia.

Todas las alternativas de las que podemos disponer trabajan con JavaScript, entre ellos, el SyntaxHighlighter (que es uno de los más usados), pero, luego de revisar Google Code Prettify, no tengo quejas.

Características:

- es ligero, no bloquea la página mientras se carga.
- dispone de varios estilos personalizados a través de CSS.
- soporta: bash, C, Java, JavaScript, Perl, Python, SQL, XML, HTML, PHP, entre otros.
- no hay necesidad de especificar el lenguaje para que lo coloree.
- si lo desea puede especificar el lenguaje.
- fácil de instalar.

Podemos ver la demostración o descargar la ultima versión, aplicarlo es muy fácil:

1.- incluimos el archivo prettify.css y prettify.js antes de la etiqueta </head>:
<link href='ruta_hacia_el_script/prettify.css' rel='stylesheet' type='text/css'/>
<script src='ruta_hacia_el_script/prettify.js' type='text/javascript'/>

2.- debemos llamar a la función prettyPrint() para que comience a colorear el código especifico; eso lo podemos hacer de varias formas, en el sitio oficial recomiendan agregarlo al evento onLoad en la etiqueta <body>:
<body onload="prettyPrint()">

3.- para indicarle al Google Code Prettify que código va a colorear, solo metemos el code entre etiquetas pre o code, ejemplo:
<pre class="prettyprint">
  // aquí tu code
</pre>     

<code class="prettyprint">
  // aquí tu code 
</code>

cuando la pagina termine de cargar se mostrara nuestro código coloreado.

ver themes

En Ribosomatic nos muestran una forma de evitar tener que colocar la clase prettyprint cada vez que agreguemos un código e incluso, evitar que se ejecute la función prettyPrint() si no hay etiqueta pre o code, todo esto de manera automatica con jquery.
Clic aquí para mostrar u ocultar la lista
// agregar la hoja de estilos
<link type="text/css" rel="stylesheet" href="prettify/prettify.css" />

<script type="text/javascript">
$(document).ready(function() {

    // agrega clase prettyprint a todos los bloques <pre> (tambien podemos agregar <code>)
    var prettify = false;
    $("pre").each(function() {
        $(this).addClass('prettyprint');
        prettify = true;
    });

    // si se encontro bloques de código se llama la función prettyPrint
    if ( prettify ) {
        $.getScript("prettify/prettify.js", function() { prettyPrint() });
    }
});
</script>

Código de ejemplo:
<html>
<head>
<title>Code Prettifier</title>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='ruta/prettify.css' rel='stylesheet' type='text/css'/>
<script src='ruta/prettify.js' type='text/javascript' ></script>
</head>
<body onload="prettyPrint()">
   <h1>Bash</h1>
   <pre class="prettyprint">
   #!/bin/bash

   # Fibonacci numbers
   # Writes an infinite series to stdout, one entry per line
   function fib() {
   local a=1
   local b=1
   while true ; do
     echo $a
     local tmp=$a
     a=$(( $a + $b ))
     b=$tmp
   done
 }
</pre>
</body>
</html> 

2 comentarios: Suscribete a los comentarios por RSS

cass

Al parecer "ahora" no funciona cargando el script directamente desde google code, ya iremos a saber porqué ..

El zip con los codes de descarga funciona perfectamente, pruebalo en diferentes navegadores. Actualice el post con un ejemplo corto, funciona perfectamente.
saludos!

Publicar un comentario

- Los comentarios están siendo moderados y serán publicados en la brevedad posible.